开发环境:一般是本地开发时所使用的环境,改动很频繁
测试环境:较为稳定的版本,一般用于部署测试
生产环境:发布到线上的版本
配置不同环境变量可避免切换不同环境时手动修改项目配置,请求url等,vue项目中可先在package.json文件中这样设置:
"scripts": {"dev": "vue-cli-service serve --mode development", //开发环境"dev:test": "vue-cli-service serve --mode test", //测试环境"build:test": "vue-cli-service build --mode test","build": "vue-cli-service build --mode production", //生产环境},
这样在启动项目时使用不同命令后通过process.env.NODE_ENV就可以判断当前处于什么环境,process.env可直接使用,无需引入
然后可以在项目根目录中新建3个文件:
.env.development
# 开发环境NODE_ENV = 'development'# 开发环境,api前缀VUE_APP_BASE_API = ''# 开发环境,Url地址VUE_APP_BASE_URL = 'http://192.168.xxx'
.env.test
# 测试环境NODE_ENV = 'test'# 测试环境,api前缀VUE_APP_BASE_API = ''#测试环境,Url地址VUE_APP_BASE_URL = 'http://xxx'
.env.production
# 生产环境NODE_ENV = 'production'# 生产环境,api前缀VUE_APP_BASE_API = '/api'# 生产环境,Url地址VUE_APP_BASE_URL = 'http://xxx'
3个文件创建完成,在项目中打印process.env可获取文件配置的内容