Question

Vue CLI v3在为生产而构建时总是创建“ dist / report.html”。这是一个webpack捆绑分析器报告。

我找不到停止构建该文件的方法。

在构建用于生产的Vue CLI 3应用程序时如何避免创建“ report.html”？

这是我的package.json脚本：

"scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },

Answer 1

到目前为止，我发现禁用它的唯一方法是通过vue.config.js：

pluginOptions: {
    webpackBundleAnalyzer: {
        analyzerMode: "disabled"
    }
},

很高兴知道为什么在Vue CLI 3中始终启用该功能。

Answer 2

请确保您的build npm脚本不包含--report参数。

"scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report",
}

Answer 3

自Vue CLI 3.8.4起，我想分享一些更新：

Vue CLI

webpack-bundle-analyzer是@vue/cli-service@^3.9.0的依赖项
默认情况下，vue-cli-service build既不会生成dist/report.html也不会生成dist/report.json
根据Vue CLI documentation：
- --report生成dist/report.html
- --report-json生成dist/report.json。顺便说一下，这个JSON文件很快就会变得很大
- 两个参数都可以累加（同时生成report.html和report.json）。当我进行测试时，将两个参数相加会使构建时间显着延长

Webpack捆绑分析器

Vue CLI不会自动运行Web服务器来预览报告文件。如果您想使用webpack-bundle-analyzer in the standard way，则必须更新Webpack配置：

// in {root folder}/vue.config.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
};

即使没有--report或--report-json，也将始终生成report.html，并且由于将提示http://localhost:8888，因此8888端口应该可用

如何停止vue cli建立“ report.html”？

3 个答案:

Vue CLI

Webpack捆绑分析器