uniapp如何实现多环境配置

前后端分离开发模式中，无论前后端都有可能区分不同的环境配置，开发环境（dev）、测试环境（test）、线上生产环境（prod）等，不同环境的设置，后端请求api地址等不同，那么在uniapp如何设置多环境配置呢？

如图：uniapp在编译命令中就已经携带了环境标识，只需要根据该标识进行不同配置文件的引用即可

直接上代码，大概原理如下：

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

实现方案

配置不同环境文件

假设只区分开发环境和线上生产环境，我们可以在根目录下创建.env.js，.env.dev.js，.env.prod.js这三个文件

• .env.js类似于springboot的application.properties文件，负责根据不同环境，加载对应的配置文件
• .env.dev.js负责开发环境的参数配置
• .env.prod.js负责生产环境的参数配置

 

.env.js

if(process.env.NODE_ENV === 'development'){
    //开发环境
    ENV_CONFIG = require('.env.dev.js');
}else{
    //生产环境
    ENV_CONFIG = require('.env.prod.js');
}

//给环境变量process.uniEnv赋值
if (ENV_CONFIG) {
    process.uniEnv = {};
    for (let key in ENV_CONFIG) {
        process.uniEnv[key] = ENV_CONFIG[key];
    }
}

 .env.dev.js

const config = {
    baseUrl: 'http://127.0.0.1:3000/'
}
module.exports = config;

.env.prod.js

const config = {
    baseUrl: 'http://prod.XX.com/'
}
module.exports = config;

通过main.js执行导入环境配置

main.js文件中添加代码，目的是使得项目在启动时，运行.env.js中的代码，将设置的参数赋值给process.uniEnv，此后，在全局任何地方都能方便引用配置文件中的参数

//引用并设置环境变量
import '.env.js'

配置变量的使用

//直接使用process.uniEnv.${参数名称} 进行取值即可，如下为取出名为baseUrl参数方法
http.config.baseURL = process.uniEnv.baseUrl; // api 地址

 

总结

• 在网上查询实现方案，有些开发者将参数导出之后，赋值给全局变量globalData，然后再将其取出使用，也是一个可行方案。
• 另外vue本身就自带process.env全局可以使用，只需要将参数赋值给process下的uniEnv（变量名可自取）即可全局引用，比起globalData，引用更加方便快捷。