前情
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端注入環境變量，如果有知道的，希望不吝分享，一起學習一起進步
 或 = ())
