iView Admin项目分环境打包使用不同的配置(可推及所有vue项目)

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。"

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。