vue-cli4环境变量和分环境打包

基本原理

环境变量概念

可以在根目录的下列文件中指定环境变量：

.env // 在所有环境中被载入
.env.local // 在所有环境中被载入，但会被git忽略
.env.[mode] // 只在指定的模式种被载入
.env.[mode].local // 只在指定的模式中被载入， 但会被git忽略

除了自定义的VUE_APP_*变量外，还有2个在应用中始终可用的变量：

1. NODE_ENV：会是"development"、"production"或"test"中的一个。具体的值取决于应用运行的模式。
2. BASE_URL：会和vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径。为一个特定模式准备的环境文件（例如.env.production）将会比一般的环境文件（例如.env）拥有更高的优先级。

模式概念

一般情况下一般3个默认模式：

1、development模式用于vue-cli-service serve
2、production模式用于vue-cli-service build 和 vue-cli-service test:e2e
3、test模式用于vue-cli-service test:unit模式不等于NODE_ENV，一个模式有多个环境变量。

每个模式都可将NODE_ENV的值设置为模式的名称（可重新复制更改）。
可以通过为.env文件增加后缀来设置某个模式下特有的环境变量。（比如.env.development）。
可以通过传递–mode选项参数为命令行覆写默认的模式。

// 比如在构建命令中使用开发环境变量
"dev-build": "vue-cli-service build --mode development"

环境变量的使用

只有VUE_APP_开头的变量会被webpack.DefinePlugin静态嵌入到客户端的包中（即在项目代码中使用）。
访问方式： process.env.VUE_APP_SECRET

vue-cli-service serve用法

vue-cli-service serve [options] [entry]

选项：
–open：在服务器启动时打开浏览器
–copy：在服务器启动时将URL复制到剪切板
–mode：指定环境模式（默认：development）
–host：指定host（默认：0.0.0.0）
–port：指定port（默认：8080）
–https：使用https（默认：false）

vue-cli-service build用法

vue-cli-service build [options][entry|pattern]

选项：
–mode：指定环境模式（默认值：production）
–dest：指定输出目录（默认：dist）
–modern：面向现代浏览器带自动回退地构建应用
–target app|lib|wc|wc-async（默认值：app）
–name：库或Web Components模式下地名字（默认值：package.json中的"name"字段或入口文件名）
–no-clean：在构建项目之前不清除目标目录
–report：生产report.html以帮助分析包内容
–report-json：生成report.json以帮助分析包内容
–watch：监听文件变化

分环境打包

实际开发中，最少会分3个环境：开发环境（用于本地开发）、测试环境（模拟生产环境，上线前的测试）、生产环境。

添加mode test

// 修改package.json
"scripts": {
 "serve": "vue-cli-service serve --open --mode development",
 "build": "vue-cli-service build",
 "test": "vue-cli-service build --mode test"
}

添加.env.test文件

跟路径添加.env.test文件。内容如下：

NODE_ENV="production" // 表明生产环境（需要打包）
VUE_APP_CURRENTMODE="test" // 表明生产环境模式信息
VUE_APP_BASEURL="http://localhost:8080" // 测试服务器地址