iView Admin本身有个统一的配置文件,是config/index.js。不过里面默认只有dev环境和pro环境,还缺少个test环境的配置。于是针对不同环境使用不同配置的需求开始改造。
首选在index.js每个配置项增加test环境对应的具体配置内容,类似下图:
baseUrl: {
dev: 'http://127.0.0.1:9000/api/v1/',
test: 'http://test.com/api/v1/',
pro: 'http://prod.com/api/v1/'
},
然后增加个统一按当前环境读取配置的方法,我在component/util.js里添加了分环境读取配置的方法,如下:
export const getEnvConfig = (configKey) =>{
if(!config.hasOwnProperty(configKey)){
return ''
}
if(process.env.NODE_ENV === 'development'){
return config[configKey]['dev']
}else if(process.env.VUE_APP_ENV === 'production' || process.env.VUE_APP_ENV === 'prod'){
config[configKey]['pro']
}else if(process.env.VUE_APP_ENV === 'test'){
return config[configKey]['test']
}else{
return config[configKey]
}
}
这里的config,对应的是config/index.js得到的完整配置数据对象。
然后在负责进行构建的机器上,增加环境变量 VUE_APP_ENV,如果是test环境则VUE_APP_ENV = test,正式环境则是VUE_APP_ENV = prod。这样即可分环境使用不同的配置。
参考资料:
https://cli.vuejs.org/zh/guide/mode-and-env.html 中的"只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们:process.env.VUE_APP_SECRET。"