前情

uni-app是我比較喜歡的跨平臺(tái)框架，它能開發(fā)小程序/H5/APP(安卓/iOS)，重要的是對前端開發(fā)友好，自帶的IDE可視化的運(yùn)行和打包也讓開發(fā)體驗(yàn)也非常棒，公司項(xiàng)目就是主推uni-app，現(xiàn)在我的開發(fā)模式是用HBuilder X跑項(xiàng)目，寫代碼是用的cursor，不是通過命令行方式啟動(dòng)和打包項(xiàng)目的

什么場景需要做多環(huán)境切換？

對于客戶服務(wù)器模式 (Client–server model)的項(xiàng)目，應(yīng)該都會(huì)有測試環(huán)境和生產(chǎn)環(huán)境的，有的專業(yè)一點(diǎn)的還會(huì)有灰度模式，目前我負(fù)責(zé)的項(xiàng)目是一個(gè)跨端小程序項(xiàng)目，只有測試服和生產(chǎn)服，通過自帶的環(huán)境變量是可以做到服務(wù)環(huán)境切換的

但現(xiàn)在有這么一個(gè)情況，最近在和服務(wù)端聯(lián)調(diào)的時(shí)候發(fā)現(xiàn)服務(wù)端接口問題較多，好幾個(gè)接口調(diào)了一下午還是報(bào)錯(cuò)，服務(wù)端跟我說能不能直接連他本地的環(huán)境，他也就不用老是發(fā)版了，也就是說需要增加一個(gè)本地服務(wù)的環(huán)境

基礎(chǔ)版：測試服和生產(chǎn)服環(huán)境切換

在使用HBuilder X運(yùn)行項(xiàng)目和打包項(xiàng)目都會(huì)有注入環(huán)境變量process.env.NODE_ENV，根據(jù)它能判斷當(dāng)前運(yùn)行還是打包項(xiàng)目，示例代碼如下，此方式可以滿足大多數(shù)保只有測試和生產(chǎn)環(huán)境的項(xiàng)目

export const TEST_BASE_URL = 'https://api-test.com'; // 測試服地址
export const ONLINE_BASE_URL = 'https://api-prod.com'; //  正式服地址

// 根據(jù)環(huán)境變量切換是走正式服還是測試服
const createBaseUrl = () => {
    // 開發(fā)環(huán)境
    if (process.env.NODE_ENV  === "development") {
        return TEST_BASE_URL;
    } else {
        // 生產(chǎn)環(huán)境
        return ONLINE_BASE_URL;
    }
}

測試服和生產(chǎn)服環(huán)境、本地環(huán)境切換

對于HBuilder X跑的項(xiàng)目，不像web或者H5等通過命令行跑起的項(xiàng)目，如果是使用命令行跑起的項(xiàng)目，你可以在命令行后面注入環(huán)境變量來達(dá)到多環(huán)境的切換

丐版實(shí)現(xiàn)：

最精暴的實(shí)現(xiàn)方式是直接通過注釋打開關(guān)閉的方式實(shí)現(xiàn)服務(wù)環(huán)境切換，關(guān)鍵代碼如下：

// export const TEST_BASE_URL = 'https://api-test.com'; // 測試服地址
export const TEST_BASE_URL = 'https://api-local.com'; // 本地服務(wù)地址
export const ONLINE_BASE_URL = 'https://api-prod.com'; //  正式服地址

// 根據(jù)環(huán)境變量切換是走正式服還是測試服
const createBaseUrl = () => {
    // 開發(fā)環(huán)境
    if (process.env.NODE_ENV  === "development") {
        return TEST_BASE_URL;
    } else {
        // 生產(chǎn)環(huán)境
        return ONLINE_BASE_URL;
    }
}

優(yōu)化版實(shí)現(xiàn)：

官方提供了別的方式注入環(huán)境變量，在根目錄下package.json里增加配置即可，如果你項(xiàng)目沒有此文件新建一個(gè)即可，你可以通過運(yùn)行npm init -y快速生成package.json，配置關(guān)鍵代碼如下：

{
  ...
  "uni-app": {
    "scripts": {
      "alipay-test": {
        "title": "支付寶小程序 本地環(huán)境",
        "env": {
          "UNI_PLATFORM": "mp-alipay",
          "TYPE": "local"
        }
      }
    }
  },
  ...
}

服務(wù)切換關(guān)鍵代碼如下：

export const TEST_BASE_URL = 'https://api-test.com'; // 測試服地址
export const LOCAL_BASE_URL = 'https://api-local.com'; // 本地服務(wù)地址
export const ONLINE_BASE_URL = 'https://api-prod.com'; //  正式服地址

// 根據(jù)環(huán)境變量切換是走正式服還是測試服
const createBaseUrl = () => {
    // 開發(fā)運(yùn)行環(huán)境
    if (process.env.NODE_ENV  === "development") {
      if (process.env.name === 'local') { 
          return LOCAL_BASE_URL;
      }
        return TEST_BASE_URL;
    } else {
        // 打包運(yùn)行環(huán)境切換
        if (process.env.name === 'local') { 
          return LOCAL_BASE_URL;
      }
        // 生產(chǎn)環(huán)境
        return ONLINE_BASE_URL;
    }
}

配置好上面信息后，HBuilder X會(huì)在運(yùn)行和發(fā)布命令下增加配置好的打包和發(fā)布入口，如下圖：

至此，當(dāng)前項(xiàng)目不但可以做到測試環(huán)境切服務(wù)，生成環(huán)境一樣可以切服務(wù)，其實(shí)上面的配置在注入環(huán)境變量的同時(shí)，同時(shí)注入了uni-app特有的條件編譯代碼

官方文擋：package.json | uni-app官網(wǎng)

注意

官方提供自定義環(huán)境變量注入的方式，只支持H5和小程序平臺(tái)，不支持APP，查閱了官方文擋，并沒有發(fā)現(xiàn)怎么在APP端注入環(huán)境變量，如果有知道的，希望不吝分享，一起學(xué)習(xí)一起進(jìn)步

以上就是uni-app項(xiàng)目實(shí)現(xiàn)多服務(wù)環(huán)境切換的詳細(xì)教程的詳細(xì)內(nèi)容，更多關(guān)于uni-app多服務(wù)環(huán)境切換的資料請關(guān)注腳本之家其它相關(guān)文章！