如何停止 vue cli 构建 "report.html"？

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

确保您的 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 2

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

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

很高兴知道为什么这个东西在 Vue CLI 3 中总是打开。

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 将始终生成并且 8888 端口应该可用，因为 http://localhost:8888 将被提示

如何停止 vue cli 构建 "report.html"？

How to stop vue cli building the "report.html"?

vue.js

vue-cli

vue-cli-3

Vue CLI

Webpack 包分析器