我使用的是vue-cli3.o，以下谈到的内容都是vue-cli3.0的环境下配置，如需安装vue-cli3.0，可通过下面命令安装
npm install -g @vue/cli
再开发过程中，我们经常会有多个环境的部署，比如本地环境，qa环境，线上环境，这些环境中我们访问的后端域名都不一致，或者是后端API有些许的不一样，如qa环境，api前缀为/qa/，线上环境api前缀为/prod等等，这就使得我们在编写vue项目也需要使用多个环境。
目前我参考的文章是vue-cli环境变量和模式，首先可以知道vue可以通过不同的文件来配置相应的环境配置。
# mode代表对应的环境，
#local文件会被git忽略，故只对当前环境邮箱，其他人通过git是没有该配置的
.env.[mode].{local}
配置读取的顺序为
.env
.env.local
.env.[mode]
.env.[mode].local
即后读取的配置将会覆盖前面文件的配置，可能我们配置qa环境为线上qa环境，但是如果有全栈的同事，可以在本地配置一个.env.qa.local，将配置改成本地调用就很方便的避免环境配置的修改。
然后我们在看一下，.env环境里需要包含哪些内容。
1、系统包含的变量
#对应vue-cli运行模式，有三种development，production，test
#development对应开发模式，会启动一个开发服务器，方便调试
#production会产生一个可用于生产的包
#test用于单元测试
NODE_DEV
#应用部署的基础路径，vue.config.js里的publicPath
BASE_URL
2、自定义变量
自定义变量需要以VUE_APP_开头，如：
VUE_APP_PROXY_URL=http://127.0.0.1:12800/qa/api
我们已经可以定义了这些变量，那在代码中如何使用呢？需要通过process.env可以使用系统和自定义变量。
process.env.VUE_APP_PROXY_URL
是不是以为到这里就以为结束了，还没有，要想服务使用代码还需要改package.json文件，可以看到package.json里有script配置，这里有我们运行的脚本，我们只需在这里加上配置即可。
我们可以通过vue-cli-service serve 或者vue-cli-service build来确定是启动开发服务器还是打包一个可用于生产的包，便于我们调试与部署。
"scripts": {
"uat": "vue-cli-service serve --mode qa",
"qa": "vue-cli-service build --mode qa",
"prod": "vue-cli-service build --mode prod"
},
到这里基本上就差不多了。
npm run uat #启动开发服务器，应用qa文件配置
npm run qa #生产qa环境的包，应用qa文件配置
npm run prod #生产prod环境的包，应用prod文件配置
vue-cli3.0多环境的配置就到这里了。
网友评论