.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";