快捷導(dǎo)航

uniapp微信小程序多環(huán)境配置以及使用教程

更新時(shí)間：2023年05月17日 16:40:36 作者：我總是詞不達(dá)意

前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序多環(huán)境配置以及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前后端分離開發(fā)模式中，無論前后端都有可能區(qū)分不同的環(huán)境配置，開發(fā)環(huán)境（dev）、測(cè)試環(huán)境（test）、線上生產(chǎn)環(huán)境（prod）等，不同環(huán)境的設(shè)置，后端請(qǐng)求api地址等不同，那么在小程序如何設(shè)置多環(huán)境配置呢？

定義其他的環(huán)境變量

之前搞vue的時(shí)候可以通過 .env的方式配置開發(fā)測(cè)試和線上需要的環(huán)境變量

uniapp中只有 development 和 production 這兩個(gè)條件

vu2版本通過process.env.NODE_ENV可以獲取到

我如果需要其他的變量怎么辦呢：如測(cè)試 test等

通過官網(wǎng)我們可以看到示例

在根目錄下的 package.json文件中（沒有的話通過 npm init -y初始化創(chuàng)建一個(gè)）

{
  "uni-app": {
    "scripts": {
      "dev": {
        "title": "微信小程序——開發(fā)版",
        "env": {
          "ENV_TYPE": "dev",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://127.0.0.1:8080/"
        }
      },
      "test": {
        "title": "微信小程序——測(cè)試版",
        "env": {
          "ENV_TYPE": "test",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://test.domain/"
        }
      },
      "pro": {
        "title": "微信小程序——正式版",
        "env": {
          "ENV_TYPE": "pro",
          "UNI_PLATFORM": "mp-weixin",
          "VUE_APP_BASE_URL": "http://pro.domain/"
        }
      }
    }
  },
  "name": "xm-uni-app",
  "version": "1.0.0",
  "description": "{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

保存之后，在HBuilderX中會(huì)顯示在運(yùn)行/發(fā)行菜單中

vue2版本中使用

直接通過process.env打印的時(shí)候會(huì)看不到

直接通過process.env.變量名使用就行

console.log(process.env.VUE_APP_BASE_URL,'獲取處于當(dāng)前開發(fā)環(huán)境的url');
console.log(process.env.ENV_TYPE,'獲取當(dāng)前處于哪個(gè)開發(fā)環(huán)境');
console.log(process.env,'process.env++++++++++++');

vue3 vite版中使用

在vue3中獲取不到process，所以需要一些改造

{
  "uni-app": {
    "scripts": {
      "dev": {
        "title": "微信小程序——開發(fā)版",
        "env": {
          "ENV_TYPE": "dev",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://127.0.0.1:8080/"
        }
      },
      "test": {
        "title": "微信小程序——測(cè)試版",
        "env": {
          "ENV_TYPE": "test",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://test.domain/"
        }
      },
      "pro": {
        "title": "微信小程序——正式版",
        "env": {
          "ENV_TYPE": "pro",
          "UNI_PLATFORM": "mp-weixin",
          "VITE_BASE_API": "http://pro.domain/"
        }
      }
    }
  }
}

在src/utils文件夾下創(chuàng)建envConfig.js

// 導(dǎo)出的環(huán)境請(qǐng)求地址
//本地環(huán)境
const dev = {
  ENV: "dev",
  VITE_BASE_API: "http://127.0.0.1:8080/dev-api",
};
//正式環(huán)境
const pro = {
  ENV: "pro",
  VITE_BASE_API: "https://xxx/prod-api",
};
//測(cè)試環(huán)境
const test = {
  ENV: "test",
  VITE_BASE_API: "https://xxx/test-api",
};
export default {
  dev,
  test,
  pro,
};

在vite.config.js添加配置

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import ENV_CONFIG from "./utils/envConfig.js";
import { resolve } from "path"; // 導(dǎo)入 path 模塊，幫助我們解析路徑
export default defineConfig(() => {
  return {
    server: {
      port: "3002",
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, "/src"),
      },
    },
    plugins: [uni()],
    define: {
      "process.env.config": ENV_CONFIG, //配置一
      'process.env': process.env, //配置二
    },
  };
});

使用方式

let baseURL = process.env.config[process.env.UNI_SCRIPT].VITE_BASE_API; //獲取處于當(dāng)前開發(fā)環(huán)境的url
let evnName = process.env.config[process.env.UNI_SCRIPT].ENV; //獲取當(dāng)前處于哪個(gè)開發(fā)環(huán)境
console.log("baseURL:", baseURL, "++++++++++++++++++++++++");
console.log("envName:", evnName, "++++++++++++++++++++++++");
console.log("evn:", process.env, "++++++++++++++++++++++++");