vue-cli 3.0脚手架配置及扩展（六）：npm run serve 和 npm run build 拦截修改

置顶

franks_t_d

于 2018-06-20 20:03:10 发布

阅读量2.4w

点赞数 2

分类专栏： vue es6 Node.js gulp webpack 文章标签： vue-cli vue-cli 3.0 vue.config.js

本文链接：https://blog.youkuaiyun.com/franks_t_d/article/details/80751604

版权

本文档介绍了如何修改vue-cli 3.0的`vue-cli-service.js`文件以拦截`npm run serve`和`npm run build`命令，允许添加自定义参数。通过修改，`npm run serve`支持指定启动模块，而`npm run build`需明确指定应用名。同时，文件执行时会检查用户命令，确保参数正确，否则将终止命令并给出使用指导。参考内容包括vue.config.js的多页配置和VueConf类的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改文件为：path node_modules/@vue/cli-service/bin/vue-cli-service.js，该文件的修改基于vue-cli的版本为3.0.0-rc.2版本，这是node_modules内部文件，所以在升级vue-cli3.0时会被覆盖掉，所以建议存档，并且修改package.json中的本地开发依赖配置对象devDependencies，修改以‘@vue/’开头的依赖包为固定版本，即去除^和~

本文件主要对npm run serve 和 npm run build 命令进行拦截，获得我们自定义的命令参数后，再对命令进行还原。文档请求了AppConf类，请自行修改路径。

代码如下：

#!/usr/bin/env node

/**
 * @fileOverview vue脚手架命令服务入口
 * @modifyBy Franks.T.D
 * @modifyDate 2018/06/16
 * @modifyOverview 增加命令包装：serve时支持模块启动；build时必须指定一个存在的应用名
 * @path node_modules/@vue/cli-service/bin/vue-cli-service.js
 */

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node
if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `