建站宝盒是什么,企业门户网站什么意思,宁波外贸公司排名前十,小学英语教师做应用相关网站前情
uni-app是我比较喜欢的跨平台框架#xff0c;它能开发小程序/H5/APP(安卓/iOS)#xff0c;重要的是对前端开发友好#xff0c;自带的IDE可视化的运行和打包也让开发体验也非常棒#xff0c;公司项目就是主推uni-app#xff0c;现在我的开发模式是用HBuilder X跑项目…前情
uni-app是我比较喜欢的跨平台框架它能开发小程序/H5/APP(安卓/iOS)重要的是对前端开发友好自带的IDE可视化的运行和打包也让开发体验也非常棒公司项目就是主推uni-app现在我的开发模式是用HBuilder X跑项目写代码是用的cursor不是通过命令行方式启动和打包项目的
什么场景需要做多环境切换
对于客户服务器模式 (Client–server model)的项目应该都会有测试环境和生产环境的有的专业一点的还会有灰度模式目前我负责的项目是一个跨端小程序项目只有测试服和生产服通过自带的环境变量是可以做到服务环境切换的
但现在有这么一个情况最近在和服务端联调的时候发现服务端接口问题较多好几个接口调了一下午还是报错服务端跟我说能不能直接连他本地的环境他也就不用老是发版了也就是说需要增加一个本地服务的环境
基础版测试服和生产服环境切换
在使用HBuilder X运行项目和打包项目都会有注入环境变量process.env.NODE_ENV根据它能判断当前运行还是打包项目示例代码如下此方式可以满足大多数保只有测试和生产环境的项目
export const TEST_BASE_URL https://api-test.com; // 测试服地址
export const ONLINE_BASE_URL https://api-prod.com; // 正式服地址// 根据环境变量切换是走正式服还是测试服
const createBaseUrl () {// 开发环境if (process.env.NODE_ENV development) {return TEST_BASE_URL;} else {// 生产环境return ONLINE_BASE_URL;}
}测试服和生产服环境、本地环境切换
对于HBuilder X跑的项目不像web或者H5等通过命令行跑起的项目如果是使用命令行跑起的项目你可以在命令行后面注入环境变量来达到多环境的切换
丐版实现
最精暴的实现方式是直接通过注释打开关闭的方式实现服务环境切换关键代码如下
// export const TEST_BASE_URL https://api-test.com; // 测试服地址
export const TEST_BASE_URL https://api-local.com; // 本地服务地址
export const ONLINE_BASE_URL https://api-prod.com; // 正式服地址// 根据环境变量切换是走正式服还是测试服
const createBaseUrl () {// 开发环境if (process.env.NODE_ENV development) {return TEST_BASE_URL;} else {// 生产环境return ONLINE_BASE_URL;}
}优化版实现
官方提供了别的方式注入环境变量在根目录下package.json里增加配置即可如果你项目没有此文件新建一个即可你可以通过运行npm init -y快速生成package.json配置关键代码如下
{...uni-app: {scripts: {alipay-test: {title: 支付宝小程序 本地环境,env: {UNI_PLATFORM: mp-alipay,TYPE: local}}}},...
}服务切换关键代码如下
export const TEST_BASE_URL https://api-test.com; // 测试服地址
export const LOCAL_BASE_URL https://api-local.com; // 本地服务地址
export const ONLINE_BASE_URL https://api-prod.com; // 正式服地址// 根据环境变量切换是走正式服还是测试服
const createBaseUrl () {// 开发运行环境if (process.env.NODE_ENV development) {if (process.env.name local) { return LOCAL_BASE_URL;}return TEST_BASE_URL;} else {// 打包运行环境切换if (process.env.name local) { return LOCAL_BASE_URL;}// 生产环境return ONLINE_BASE_URL;}
}配置好上面信息后HBuilder X会在运行和发布命令下增加配置好的打包和发布入口如下图 至此当前项目不但可以做到测试环境切服务生成环境一样可以切服务其实上面的配置在注入环境变量的同时同时注入了uni-app特有的条件编译代码
官方文挡package.json | uni-app官网
注意
官方提供自定义环境变量注入的方式只支持H5和小程序平台不支持APP查阅了官方文挡并没有发现怎么在APP端注入环境变量如果有知道的希望不吝分享一起学习一起进步
