网站首页布局设计成都企业网站建设价格
前情
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端注入环境变量，如果有知道的，希望不吝分享，一起学习一起进步