如何从使用 vue.config.js 的 webpack 构建中排除包含模拟文件的目录？

Question

我在根目录下有一个名为 mock 的目录，其中包含我在开发模式下用于运行应用程序的模拟数据。我想在构建生产时排除它们。我注意到每当我运行 vue-cli-service build 时它就会被添加到 bundle 中并且它正在膨胀我的应用程序包大小。我正在使用 vue-cli，所以我必须使用 vue.config.js。

文档或更广泛的网络上的任何答案都不清楚我如何指定要从构建中排除的 folders/files。

这是我的 vue.config.js.

的片段

module.exports = {
  chainWebpack: (config) => {
    config.resolve.symlinks(false)
  },
  configureWebpack: {
    plugins: [
      new CompressionPlugin()
    ]
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/styles/main.scss";`
      }
    }
  }
}

Answer 1

这不是完美的解决方案，但是...

如果你想在构建时排除那个目录，你可以尝试使用 require instead of import。像这样 (source):

if (process.env.VUE_APP_MY_CONDITION) {
  require('./conditional-file.js');
}

但要注意！

如何从使用 vue.config.js 的 webpack 构建中排除包含模拟文件的目录？

How do i exclude a directory with mocking files from webpack build with vue.config.js?

vue.js

webpack

vue-cli

vue-cli-3