一般服务器分为本地环境
,测试环境
,正式环境
,有的还包括预发布环境
,
此时我们需要配置不同的环境,获取不同的apiUrl前缀,避免了频繁手动更改api。
在根目录下添加一下几个文件
文件 | 环境 | NODE_ENV |
---|---|---|
.env | 通用环境变量 | (各个mode通用) |
.env.development | 本地开发环境 | NODE_ENV = ‘development’ |
.env.new | 正式生产环境 | NODE_ENV = ‘production’ |
.env.pred | 预发布环境 | NODE_ENV = ‘production’ |
.env.test | 测试环境 | NODE_ENV = ‘test’ |
文件中的变量命名必须以 VUE_APP_
开头 才能被识别,在.vue中调用用 process.env.VUE_APP_XX
在一个项目中可能分为多个子项目,那么可能会有多个API或多个页面跳转路径,那么建议在src路径下新建一个config文件夹index.js文件去配置不同mode下的路径。
在package.json里配置不同环境打包
--mode
指明打包环境
--dest
指明打包生成的文件夹名称
{
"scripts": {
"start": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test --dest dist-test",
"build:new": "vue-cli-service build --mode new --dest dist-new",
"build:pred": "vue-cli-service build --mode pred --dest dist-pred",
"lint": "vue-cli-service lint"
},
}
打包
npm run build:new