以编程方式启动 vue-cli-service serve 时控制 webpack 的详细程度答案

【问题标题】：Control webpack verbosity when programmatically starting vue-cli-service serve以编程方式启动 vue-cli-service serve 时控制 webpack 的详细程度
【发布时间】：2020-01-21 16:19:08
【问题描述】：

我正在尝试从 Node.js 应用程序内部运行 vue-cli-service serve，如下所示：

const Service = require('@vue/cli-service');
const service = new Service(process.cwd());
service.init("development");
service.run('serve').then(({ server, url }) => {
  console.log("started server on " + url);
});

而且它有效。

$ node e2e.js
INFO  Starting development server...
40% building 130/136 modules 6 active ...node_modules/eslint-loader/index.js??ref--13-0!.../ui/src/js/config/Product.js...
. . .
. . .
started server on http://localhost:8080/

但是当我在 production 模式下（将 service.init("development") 更改为 service.init("production")）时，我看不到 webpack“构建”的进度了。

$ node e2e.js
INFO  Starting development server...
started server on http://localhost:8080/

因此我的问题是：如何在生产模式下启动 Vue 服务器，但将 webpack 进度打印到控制台？

【问题讨论】：

我对 Vue 文档中的任何地方都没有记录这一事实感到困惑。花了大约 6 个小时来编写一个执行相同工作的脚本，然后找到了这个。难以置信。

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

【解决方案1】：

进度由 Webpack 的 ProgressPlugin 报告，其中 Vue CLI inserts only for non-production and non-test builds（自 3.x 起）。

您可以使用devServer.progress=true（当前为undocumented）在<root>/vue.config.js 中启用此插件：

module.exports = {
  devServer: {
    progress: true  // always show progress (even in production mode)
  }
}

或者在您的e2e.js 中，您可以将ProgressPlugin 插入到Service 实例的webpackChainFns[] 之后 init()：

service.init("production")
service.webpackChainFns.push(config => {
  config
    .plugin("progress")
    .use(require("webpack/lib/ProgressPlugin"))
})

【讨论】：