vue项目.env文件配置全局环境变量

.env 文件主要的作用是存储环境变量，也就是会随着环境变化的东西，比如数据库的用户名、密码、缓存驱动、时区，还有静态文件的存储路径之类的。
因为这些信息应该是和环境绑定的，不应该随代码的更新而变化，所以一般不会把 .env 文件放到版本控制中。

.env 全局默认配置文件
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件

文件内容：
属性名必须以VUE_APP_开头，比如VUE_APP_XXX

例如
开发环境
.env.development
NODE_ENV=‘production’
VUE_APP_PROFILE=‘development’
VUE_APP_URL=‘strong/test’

生产环境
.env.production
NODE_ENV=‘production’
VUE_APP_PROFILE=‘production’
VUE_APP_URL=‘strong’

npm run serve命令 会自动加载.env.development
运行对应的环境会把env中的配置给覆盖掉.

上面是原理 下面是我们项目的一个示例

package.json文件配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build:test": "vue-cli-service --mode text",//测试
    "build:prod": "vue-cli-service --mode prod",//生产
    "build:train": "vue-cli-service --mode train",//培训
}

测试环境

.env.test
NODE_ENV='production'
VUE_APP_PROFILE='test'
VUE_APP_URL='test'

培训环境

.env.train
NODE_ENV='production'
VUE_APP_PROFILE='train'
VUE_APP_URL='train'

生产环境

.env.prod
NODE_ENV='production'
VUE_APP_PROFILE='prod'
VUE_APP_URL='prod'

api接口请求封装这里

import axios from "axios";
var postUrl='test'
if(process.env.VUE_APP_PROFILE){
    switch(process.env.VUE_APP_PROFILE){
        case 'test':
            postUrl='test'
        break;
        case 'train':
            postUrl='train'
        break;
        case 'prod':
            postUrl='prod'
        break;
    }
}
axios.defaults.baseUrl=postUrl+"XXXX";
或者
var postUrl='test'//设置个默认值 给npm run serve本地调试用的
if(process.env.VUE_APP_PROFILE){
     postUrl=process.env.VUE_APP_URL
}
axios.defaults.baseUrl=postUrl+"XXXX";