vue 中 .env，.env.development，.env.production 说明1. 配置文件： .env

1. 配置文件：

.env 全局默认配置文件，不论什么环境都会加载合并；
.env.development开发环境下的配置文件；
.env.production 生产环境下的配置文件；

2. 命名规则：

属性名必须以 VUE_APP_ 头，比如 VUE_APP_XXX，否则不符合命名规则的属性名环境变量无法被 Vue 加载。

3. 变量使用：

 console.log(process.env.VUE_APP_BASE_API)

4. 文件加载顺序：

首先，Vue在启动时，无论是在开发环境还是在生产环境，它始终都会加载.env文件里的内容，然后（划重点）=> 根据Node环境变量NODE_ENV的值来选择加载development还是production。

比如我们平常通过npm run serve启动时，我们本地系统的环境变量NODE_ENV值默认是development，这时就会先后加载.env和.env.development这两个文件。

而当我们运行npm run build构建打包时，NODE_ENV值一般为production，则此时Vue仍会先加载.env文件，然后加载.env.production文件。

其次，在按顺序加载文件时，Vue会把后一个加载的文件内容和前面加载的文件内容进行比较，如果存在变量名相同，那么它会采用后一个文件里的变量值为变量的最终值。

注意：.env文件无论是开发环境还是生产环境都会加载

5. 自定义配置文件

（1）创建`.env.staging`文件（测试环境配置）

.env.development（开发环境配置）

 # 页面标题
 VUE_APP_TITLE=若依管理系统
 
 # 开发环境配置
 ENV='development'
 
 # 若依管理系统/开发环境
 VUE_APP_BASE_API='/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES=true

.env.production（生产环境配置）

 # 页面标题
 VUE_APP_TITLE=若依管理系统
 
 # 生产环境配置
 ENV='production'
 
 # 若依管理系统/生产环境
 VUE_APP_BASE_API='/prod-api'

.env.staging（自定义配置）

 # 页面标题
 VUE_APP_TITLE=若依管理系统
 
 # 测试环境配置
 ENV='staging'
 
 # 若依管理系统/测试环境
 VUE_APP_BASE_API='/stage-api'
 
 NODE_ENV=production

（2）然后在`package.json`文件中配置：

 .....
 "scripts": {
     "dev": "vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src"
 },
 .....

运行第一个指令写法为npm run dev，实际是运行vue-cli-service serve，先后加载.env和.env.development这两个文件。
第二个npm run build:prod，实际运行vue-cli-service build，先后加载.env和.env.production这两个文件。
第三个npm run build:stage，实际运行vue-cli-service build --mode staging，先后加载.env和.env.staging这两个文件。

vue 中 .env，.env.development，.env.production 说明