- .env——全局默认配置文件,无论什么环境都会加载合并
- .env.development——开发环境下的配置文件
- .env.production——生产环境下的配置文件
注意:属性名必须以VUE_APP_开头,比如VUE_APP_xxx = "变量"
首先在跟目录创建三个文件
分别是.env.development、.env.production、.env.staging三个文件
# 页面标题 VUE_APP_TITLE = 若依管理系统 // .env.development文件里编写,NODE_ENV default is development # 开发环境配置 ENV = 'development' # 若依管理系统/开发环境 VUE_APP_BASE_API = '/dev-api' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 页面标题 VUE_APP_TITLE = 若依管理系统 # 生产环境配置 ENV = 'production' # 若依管理系统/生产环境 VUE_APP_BASE_API = '/prod-api' // .env.production文件里编写 NODE_ENV default is production
# 页面标题 VUE_APP_TITLE = 若依管理系统 NODE_ENV = production # 测试环境配置 ENV = 'staging' # 若依管理系统/测试环境 VUE_APP_BASE_API = '/stage-api'
vue-cli-service build 自定义参数
vue-cli-service build
(1)**作用:**是打包资源文件
(2)**工具:**通过脚手架依赖的dotenv模块实现参数定义和读取
(3)**原理:**detenv作用是将环境变量从.env文件加载到process.env中,代码就可以通过process.env.VUE_APP_XX访问自定义的VUE_APP_XX的值了在vue-cli-service的packjson中切换环境
(1) 在运行时如果需要区分生产环境和测试环境,只需要
“scriptes”: { “serve”: “vue-cli-service serve”, // 会将process.env.NODE_ENV设置为development “build”: “vue-cli-service build” // 会将process.env.NODE_ENV设置为production }
(2)在build时在dist/目录会有用于生产环境的包,需要添加选项–mode区分测试环境和生产环境
“scripts”: { “build:test”: “vue-cli-service build --mode test”, // 测试环境 “build:prod”: “vue-cli-service build --mode prod”, // 生产环境 },
"build:dev": "vue-cli-service build --mode dev", // 打包开发环境 "build:test": "vue-cli-service build --mode test", // 打包集成测试 "build:uat": "vue-cli-service build --mode uat", // 打包验收测试 "build:prod": "vue-cli-service build --mode prod", // 打包生产环境