开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
需求：开发，测试，正式服务器不一致，每次本地运行，提测，发布都需要手动修改服务器地址，如果忙的时候，忘记修改，编译的包服务器地址不对，导致无法使用！有没有办法可以解决，在运行和编译的时候就自动选择好配置的地址，不用每次修改？有的
目前常用的vue cli可以自动生成项目，vue cli命令支持自定义模式，通过--mode切换。
默认情况下，有三个模式：
development模式用于vue-cli-service servetest模式用于vue-cli-service test:unitproduction模式用于vue-cli-service build和vue-cli-service test:e2e
一，默认配置
使用命令新建vue项目vue create vue_serve_mode，并在main.js添加输出
console.log('process.env.NODE_ENV',process.env.NODE_ENV)
通过npm run serve运行起来，根据package.json中scripts字段中的设置，serve被设置为vue-cli-service serve，查看控制台输出process.env.NODE_ENV development，说明目前运行的是开发环境。
二、自定义配置
那么如何添加自定义的mode呢？
通过查看vue cli文档：cli.vuejs.org/zh/guide/mo…
自定义变量
除了NODE_ENV和BASE_URL两个默认的变量，还可以通过添加以VUE_APP_开头的变量，此变量通过webpack.DefinePlugin静态的插入到客户端代码中，实现运行和编译时自定义变量功能；
比如我们在项目根目录新增.env.dev，.env.beta，.env.release三个文件，分别标识开发，测试，发布三个环境下的配置。
然后增加VUE_APP_URL变量，表示服务器的根地址。
.env.dev中
VUE_APP_URL='http://127.0.0.1:9080/'
.env.beta中
VUE_APP_URL='http://test.api.com/'
.env.release中
VUE_APP_URL='http://api.com/'
开发阶段
项目使用vue-cli-service serve命令，此时在后面添加--mode来添加自定义的配置。
依据三个服务器配置，我们添加运行时启动命令：
在package.json文件中的script中添加如下配置
"dev": "vue-cli-service serve --mode dev",
"beta": "vue-cli-service serve --mode beta",
"release": "vue-cli-service serve --mode release",
开发服务器运行
npm run dev
测试服务器运行
npm run beta
发布服务器运行
npm run release
发布阶段
发布vue项目时运行vue-cli-service build，也可以通过添加--mode来自定义编译包访问的服务器地址。
依据三个服务器不同地址，添加一下配置，命令尽量简写，devb表示devbuild
"devb": "vue-cli-service build --mode dev",
"betab": "vue-cli-service build --mode beta",
"releaseb": "vue-cli-service build --mode release"
打包开发服务器
npm run devb
打包测试服务器
npm run betab
打包发布服务器
npm run releaseb
执行编译命令后，查看dist中打包好的app.js文件中，搜索VUE_APP_URL，可以看到，根据执行不同的服务器命令，VUE_APP_URL地址也是不同的。
这样就实现了，运行时，编译时通过配置命令来实现改变服务器地址的目的，不用增加开发，测试，发布阶段手动修改地址的麻烦了。
