如何使用 vue.config.js 从 webpack 构建中排除带有模拟文件的目录？答案

【问题标题】：How do i exclude a directory with mocking files from webpack build with vue.config.js?如何使用 vue.config.js 从 webpack 构建中排除带有模拟文件的目录？
【发布时间】：2021-04-19 20:31:55
【问题描述】：

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

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

这是我的vue.config.js 的sn-p。

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

【问题讨论】：

您是否在代码中的某处导入了这些模拟？

标签： vue.js webpack vue-cli vue-cli-3

【解决方案1】：

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

如果您想在构建时排除该目录，可以尝试使用 require instead of import。像这样的东西（source）：

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

但请注意this！

【讨论】：

不错。感谢您的回答