Vue.js项目如何将public/Reports文件夹排除出Webpack打包

你的问题出在对webpack配置的理解上——public目录下的文件是通过copy-webpack-plugin直接完整复制到dist目录的，而你之前配置的module.rules.exclude是用来处理被import引入的模块文件，完全不影响静态资源的拷贝流程，所以这个配置自然不会生效。

下面给你两种可行的解决方案，都是针对copy-webpack-plugin的规则修改：

方法一：使用chainWebpack链式修改配置（推荐） #

vue-cli提供了chainWebpack API来安全地修改webpack配置，我们可以找到负责拷贝public资源的插件，添加忽略规则：

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 获取copy-webpack-plugin的配置项
    config.plugin('copy').tap(args => {
      // 在忽略列表中添加Reports文件夹及其所有子内容
      args[0].patterns[0].globOptions.ignore.push('**/Reports/**');
      return args;
    });
  }
};

说明： #

• **/Reports/**是glob模式，会匹配public下的Reports文件夹，以及它下面所有的子文件夹和文件
• 修改后运行npm run build，dist目录里就不会出现Reports文件夹了
• 开发环境下，你依然可以通过/Reports/subfolder1/file1.pdf的路径访问这些PDF文件，完全不影响开发使用

方法二：直接修改configureWebpack中的copy插件配置 #

如果你更习惯用configureWebpack的方式，也可以直接配置copy-webpack-plugin，覆盖默认的拷贝规则：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, 'public'),
            to: path.resolve(__dirname, 'dist'),
            globOptions: {
              // 忽略index.html（因为vue-cli会单独处理它）和Reports文件夹
              ignore: ['**/index.html', '**/Reports/**']
            }
          }
        ]
      })
    ]
  }
};

注意： #

这种方式会替换掉vue-cli默认的copy插件配置，所以需要把index.html也加入忽略列表（因为vue-cli会单独处理index.html的打包），避免重复拷贝。

最后，记得重启开发服务器或者重新执行打包命令，让配置生效。

内容的提问来源于stack exchange，提问作者matteogll