快捷導航

uni-app項目實現(xiàn)多服務(wù)環(huán)境切換的詳細教程

更新時間：2025年06月13日 09:45:30 作者：168169

uni-app能開發(fā)小程序/H5/APP(安卓/iOS),重要的是對前端開發(fā)友好,自帶的IDE可視化的運行和打包也讓開發(fā)體驗也非常棒,最近在和服務(wù)端聯(lián)調(diào)的時候發(fā)現(xiàn)服務(wù)端接口問題較多,好幾個接口調(diào)了一下午還是報錯,所以本文給大家記錄一下uni-app項目實現(xiàn)多服務(wù)環(huán)境切換的詳細教程

前情

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

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

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

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

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

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

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跑的項目，不像web或者H5等通過命令行跑起的項目，如果是使用命令行跑起的項目，你可以在命令行后面注入環(huán)境變量來達到多環(huán)境的切換

丐版實現(xiàn)：

最精暴的實現(xiàn)方式是直接通過注釋打開關(guān)閉的方式實現(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)化版實現(xiàn)：

官方提供了別的方式注入環(huán)境變量，在根目錄下package.json里增加配置即可，如果你項目沒有此文件新建一個即可，你可以通過運行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ā)運行環(huán)境
    if (process.env.NODE_ENV  === "development") {
      if (process.env.name === 'local') { 
          return LOCAL_BASE_URL;
      }
        return TEST_BASE_URL;
    } else {
        // 打包運行環(huán)境切換
        if (process.env.name === 'local') { 
          return LOCAL_BASE_URL;
      }
        // 生產(chǎn)環(huán)境
        return ONLINE_BASE_URL;
    }
}

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