网站后台有哪些模块,asp网站 并发数,如何搭建静态网站,焦作焦煤电子商务网站建设前言
这篇文章主要介绍uniapp在Hbuilderx 中#xff0c;通过工程化#xff0c;区分不同环境、动态修改小程序appid以及自定义条件编译#xff0c;解决代码发布和运行时手动切换问题。
背景
当我们使用uniapp开发同一个项目发布不同的环境二级路径不同时#xff0c;这时候…
前言
这篇文章主要介绍uniapp在Hbuilderx 中通过工程化区分不同环境、动态修改小程序appid以及自定义条件编译解决代码发布和运行时手动切换问题。
背景
当我们使用uniapp开发同一个项目发布不同的环境二级路径不同时这时候我们就要根据环境来添加运行的基础路径 productxxx-product-api.xxx.com:9002/productConf… textxxx-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.jslet baseUrl ENV_CONFIG[process.env.NAME].baseUrl
let filesUrl ENV_CONFIG[process.env.NAME].filesUrl
5、运行和发布
需要本地调试时点击HBuilder X工具栏“运行”选择自定义的对应的环境 发布时, 点击HBuilder X工具栏“运行”选择自定义的对应的环境,编译后打开微信开发者工具或者支付宝开发者工具,上传即可(运行的哪个环境,上传的就是哪个环境),也可以点击HBuilder X工具栏 发行 ,选择自定义的对应的环境
