uni-app cli创建配置多环境读取配置文件信息
在项目src下创建以下配置文件
在package.json中添加以下代码
VUE_APP_ENV：用来区分环境 NODE_ENV：用来定死打包目录，只会打包在dist/build/xxx下 ，因为是用的是vue-cli3的架子，所以环境变量需要使用 VUE_APP_ 开头
"build-dev": "npm run build:dev",
"build:dev": "cross-env VUE_APP_ENV=development NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build-qa": "npm run build:qa",
"build:qa": "cross-env VUE_APP_ENV=qa NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build-uat": "npm run build:uat",
"build:uat": "cross-env VUE_APP_ENV=uat NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build-prd": "npm run build:prd",
"build:prd": "cross-env VUE_APP_ENV=production NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
1
2
3
4
5
6
7
8
env.js文件下添加以下代码
(function() {
let ENV_VAR = null
console.log(process.env)
// 只开发 android跟ios
switch (process.env.VUE_APP_PLATFORM) {
case 'app-plus':
//访问路径
ENV_VAR = require('env.'+ process.env.VUE_APP_ENV +'.js');
break
case 'h5':
//访问路径
ENV_VAR = require('env.'+ process.env.VUE_APP_ENV +'.js');
break
default:
console.warn('error')
break
}
if(ENV_VAR){
process.uniEnv = Object.create({})
for (let key in ENV_VAR) {
process.uniEnv[key] = ENV_VAR[key];
}
}
})()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
app.vue中引入 env.js
import 'env';
1
各个配置文件中的代码信息，这边只贴了开发环境
const UNI_APP = {
//开发环境
BaseUrl:'',
env:'development',
}
module.exports = UNI_APP
1
2
3
4
5
6
7
接下来执行打包dev环境命令
这边可以看到咱们成功读取到配置文件中的信息啦。
使用process.uniEnv在js中就可以获取到配置文件中整个对象
