在项目中，经常需要切换各种环境，比如开发环境，测试环境，预生产环境，生产环境等，如果每次打包都要根据部署的环境去修改路径十分麻烦，这时候vue-cli的模式和环境变量则能够很好地解决这个麻烦。
模式
先说模式，默认情况下，一个 Vue CLI 项目有三个模式
development模式用于vue-cli-service servetest模式用于vue-cli-service test:unitproduction模式用于vue-cli-service build和vue-cli-service test:e2e
修改模式：可以通过传递 --mode 选项参数为命令行覆写默认的模式,例如：
package.json文件
vue-cli-service build --mode development
"build:dev":"vue-cli-service build --mode development",
"build:sit":"vue-cli-service build --mode sit",
"build:uat":"vue-cli-service build --mode uat",
"build:prod":"vue-cli-service build --mode production"
-
当运行
vue-cli-service命令时，所有的环境变量都从对应的环境文件(--mode 后面接的就是文件)中载入。 -
如果文件内部不包含
NODE_ENV变量，它的值将取决于模式 -
例如，在
production模式下被设置为"production"，在test模式下被设置为"test"，默认则是"development"。
NODE_ENV 是什么呢？
它是决定你的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置, 比如
NODE_ENV＝“development”
//创建一个 webpack 配置，该配置启用热更新，
//不会对资源进行 hash 也不会打出 vendor bundles，
//目的是为了在开发的时候能够快速重新构建。
NODE_ENV＝“production”
//无论你要部署到哪个环境，应该始终把 `NODE_ENV` 设置为 `"production"`
//来获取可用于部署的应用程序。
NODE_ENV＝“test”
//Vue CLI 会创建一个优化过后的，
//并且旨在用于单元测试的 webpack 配置，
//它并不会处理图片以及一些对单元测试非必需的其他资源
环境变量
只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。我们可以在代码中以下面的方式访问：process.env.VUE_APP_TITLE
除了VUE_APP_*变量外，还有两个始终可用的特殊变量：
- NODE_ENV 值为development、productin、test中的一个。
- BASE_URL 与vue.config.js中的publicPath相符，即应用部署的基础路径
你可以在你的项目根目录(src同级)中放置下列文件来指定环境变量：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
例如：
.evn.development文件，只在开发的模式中被载入
NODE_ENV＝“development”
VUE_APP_TITLE＝"my App development"
VUE_APP_BASE_URL＝"https://logscan-sit.xxx.com/"
outputDir＝"dev"
.evn.production文件，只在生产模式中被载入
NODE_ENV＝“production”
VUE_APP_TITLE＝"my App production"
VUE_APP_BASE_URL＝"https://logscan.xxx.com/"
outputDir＝"dist"
注意：一个环境文件只包含环境变量的“键=值”对
比如test模式下，流程就是
一：在根目录创建一个名env.test的文件，
二：在package.json文件中添加”build-test”: “vue-cli-service build –mode test”
三：执行npm run build-test
就是去按照你在env.test里面的配置去buid出测试环境
