Vue.js 从 webpack 包中排除文件夹

Question

我遇到了一个关于 webpack 的非常简单的问题。 我有一个使用 vue-cli 创建的简单 Vue.js 应用程序。

我创建了要从捆绑包中排除的文件夹 public/Reports（该文件夹包含子文件夹和 PDF）。

我的项目结构是标准的：

├── dist/
│   └── (I don't want "Reports" folder here)
├── public/
│   ├── index.html
|   ├── Reports (folder that I need during development, it contains subfolders and PDfs)
│   │   └── subfolder1
│   │       └── file1.pdf
│   └── ...
├── src/
│   └── ...
├── .babel.config.js
├── .eslintrc.js
├── package.json
├── prettier.config.js
├── vue.config.js
└── README.md

我尝试排除vue.config.js 中的Reports 文件夹，但它不起作用：

const path = require("path");
const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.pdf$/,
                    exclude: [
                        path.resolve(__dirname, "public/Reports"),
                    ],
                },
            ],
        },
    },
};

我怎样才能排除这个文件夹（和子文件夹）被包含在包中？

Answer 1

您需要点击复制插件。

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin("copy").tap(([options]) => {
      options[0].ignore.push("Reports/**");
      return [options];
    });
  },
};