npm启动vue-cli-service serve问题

Posted 2023-05-04

参考技术A

1.问题提出
脚手架vue-cli (vue create ** )搭建出来的项目，2. 默认设置用npm run dev启动本地localhost及网络Network服务，4.4+默认用npm run serve启动

如果启动不成功，报错

2.问题解析
npm 允许在 package.json 文件里面，使用 scripts 字段定义脚本命令。

对于 scripts 中配置有

的项目需要用 npm run serve 启动；

对于 scripts 中配置有

的项目需要用 npm run dev 启动；

4.解决方法
知道以上东西解决起来就很简单了，如果有习惯问题，就每次自己配置 package.json 文件中 vue-cli-service serve 的启动设置。如果不想修改 package.json 文件，就找到 package.json 文件中 vue-cli-service serve 设置的对象key值，用 npm run (key值) 启动。

第一次编辑 20200618 aichishaqima

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

【中文标题】以编程方式启动 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"))
)