关于如何在vue-cli中增加额外的参数

[MRCXX]

首先

官方提供了一种方法:环境变量和模式, 已经可以解决大部分的情况

如果上面满足不了你

以前比较常用的方式是使用cross-env, 例如:

  "scripts": {
    "dev": "cross-env extraParams=998 vue-cli-service serve"
  }

但是, 没有得到我们想要的结果 extraParams

console.log(process.env)
>>>
BASE_URL: xxx,
NODE_ENV: xxx

我们看下@vue/cli-service/lib/util/resolveClientEnv.js 的部分源码, cli-service把大部分的返回参数过滤了, 把过滤的条件注销掉之后, 返回的内容就有我们想要的结果

Object.keys(process.env).forEach(key => {
  // if (prefixRE.test(key) || key === 'NODE_ENV') {
    env[key] = process.env[key]
  // }
})
//...
//...
//...
return {
  'process.env': env
}

更好的方式

用cross-env的方式几乎满足所有情况, 但是既然都改了cli-service, 可以改好点, 还是修改@vue/cli-service/lib/util/resolveClientEnv.js文件, 增加下面代码(参考):

let arr = ['--A', '--B', '--C']
arr.forEach(item => {
  let index = process.argv.indexOf(item)
  env[item.replace('--', '')] = process.argv[index + 1]
})

执行

vue-cli-service serve --A 1 --B 2 --C 3

就会得到我们想要的结果, 然后我们把cli-service提交到github仓库, 然后修改下package.json

"devDependencies": {
  "@vue/cli-service": "https://github.com/MRCXX/cli-service.git"
}

最后

为什么我不用官方提供的方式?

因为我的参数是动态的, 我可能需要根据不同的版本号来编译, 我还需要通过自动化脚本来编译, 所以把配置写在文件中不太科学

需要注意的地方

不要和默认属性冲突