uni-app多环境配置动态修改

前言

这篇文章主要介绍uniapp在Hbuilderx 中，通过工程化，区分不同环境、动态修改小程序appid以及自定义条件编译，解决代码发布和运行时手动切换问题。

背景

当我们使用uniapp开发同一个项目发布不同的环境二级路径不同时，这时候我们就要根据环境来添加运行的基础路径

product：xxx-product-api.xxx.com:9002/productConf…

text：xxx-text-api.xxx.com:9002/textConfig/

但是当我们使用HBuilderX开发时你会发现manifest.json手动配置Web配置时只能配置一个像这种情况

碰到这种情况你会怎么处理?你是不是会在每次打包发布之前变更该环境对应基础路径?

在企业级的应用中，通常会分为，开发、联调、生产等多个环境，一个项目可能要发布到多个微信小程序，在工程化中，通过使用不同的打包命令设置不同的环境变量，解决不同环境各变量的内容需手动修改的问题，比如：接口、前缀、appid等；在使用uniapp开发项目时，通常使用Hbuilder可视化运行项目，点击运行编译出来都代码环境是（development），点击发布运行编译出来的代码是（production），分别对应开发和生产，使用process.env.NODE_ENV来获取运行环境。但是在很多企业项目中，就两个环境，很难满足使用场景。

为了解决以上问题，通过在package.json中增加增加 uni-app节点，自定义条件编译和环境，通过modifyManifest.js重写appid，扩展vue.config.js配置，用环境标识区分接口。

正文

当我们使用HX创建项目时项目中是没有package.json文件和vue.config.js文件的

1、在根目录下创建package.json文件，用于配置多个环境也可用于Hx自定义发行

{"dependencies": {"js-base64": "^3.7.5","moment": "^2.29.4"},"uni-app": {"scripts": {"wxTest": {"title": "微信小程序 测试","env": {"UNI_PLATFORM": "mp-weixin","NAME": "wxTest"}},"wxProd": {"title": "微信小程序 生产","env": {"UNI_PLATFORM": "mp-weixin","NAME": "wxProd"}},"h5Browser": {"title": "H5浏览器","browser": "hbuilderx","env": {"UNI_PLATFORM": "h5","NAME": "h5Browser"}}}},"devDependencies": {"postcss-preset-env": "^9.2.0","postcss-px-to-viewport": "^1.1.1","postcss-px-viewport": "^0.0.4","postcss-viewport-units": "^0.1.6"}
}

2、在根目录下创建env.js文件，用语配置不同环境变量下参数

// H5浏览器环境
const h5Browser = {baseUrl: 'https://xxx.xxx.com',filesUrl:'https://xxx.xxx.com',appid: 'wxf000000000000009',appName:'h5测试端'
}//微信小程序 测试环境
const wxTest = {baseUrl: 'https://xxx.xxx.com',filesUrl:'https://xxx.xxx.com',appid: 'wxf000000000000001',appName:'微信测试端'
}//微信小程序 生产环境
const wxProd = {baseUrl: 'https://xxx.xxx.com',filesUrl:'https://xxx.xxx.com', appid: 'wxf000000000000002',appName:'微信生产端'
}module.exports = {h5Browser,wxTest,wxProd,
}

3、在根目录下创建vue.config.js文件，用于处理不同环境配置不同的基础路径

// 导入fs模块
const fs = require('fs')
// 导入环境变量配置文件
const ENV_CONFIG = require('./env.js')
const manifestPath = `${__dirname}/manifest.json`;
let Manifest = fs.readFileSync(manifestPath, {encoding: 'utf-8'
})function replaceManifest(path, value) {const arr = path.split('.')const len = arr.lengthconst lastItem = arr[len - 1]let i = 0let ManifestArr = Manifest.split(/\n/)for (let index = 0; index < ManifestArr.length; index++) {const item = ManifestArr[index]if (new RegExp(`"${arr[i]}"`).test(item)) ++iif (i === len) {const hasComma = /,/.test(item)ManifestArr[index] = item.replace(new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`),`"${lastItem}": ${value}${hasComma ? ',' : ''}`)break}}Manifest = ManifestArr.join('\n')
}
// 读取环境变量内容
const appid = ENV_CONFIG[process.env.UNI_SCRIPT].appid
console.log('当前appId: ',appid)
if (appid) {replaceManifest('mp-weixin.appid', `"${appid}"`)
}const appName = ENV_CONFIG[process.env.UNI_SCRIPT].appName 
console.log('当前appName: ',appName)
if (appName) {replaceManifest('name', `"${appName}"`)
}fs.writeFileSync(manifestPath, Manifest, {flag: 'w'
})

参考uniapp官方文档：uniapp.dcloud.net.cn/collocation…

4、代码中调用

代码中通过process.env.config[process.env.ENV_TYPE]获取配置的变量对象

import ENV_CONFIG from './env.js'let baseUrl= ENV_CONFIG[process.env.NAME].baseUrl
let filesUrl= ENV_CONFIG[process.env.NAME].filesUrl

5、运行和发布

需要本地调试时，点击HBuilder X工具栏“运行”，选择自定义的对应的环境；

发布时, 点击HBuilder X工具栏“运行”，选择自定义的对应的环境,编译后打开微信开发者工具或者支付宝开发者工具,上传即可(运行的哪个环境,上传的就是哪个环境),也可以点击HBuilder X工具栏 "发行" ,选择自定义的对应的环境