以编程方式启动 vue-cli-service serve 时控制 webpack 的详细程度
Posted
技术标签:
【中文标题】以编程方式启动 vue-cli-service serve 时控制 webpack 的详细程度【英文标题】:Control webpack verbosity when programmatically starting vue-cli-service serve 【发布时间】: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 个小时来编写一个执行相同工作的脚本,然后找到了这个。难以置信。 【参考方案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"))
)
【讨论】:
以上是关于以编程方式启动 vue-cli-service serve 时控制 webpack 的详细程度的主要内容,如果未能解决你的问题,请参考以下文章
Vue.js项目无法启动:sh: 1: vue-cli-service: not found
你能以编程方式修改 UICollectionView 滚动方向吗?
解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。