uni-app项目怎么实现多服务环境切换

前情

uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE可视化的运行和打包也让开发体验也非常棒,公司项目就是主推uni-app,现在我的开发模式是用HBuilder X跑项目,写代码是用的cursor,不是通过命令行方式启动和打包项目的

什么场景需要做多环境切换?

对于客户服务器模式 (Client--server model)的项目,应该都会有测试环境和生产环境的,有的专业一点的还会有灰度模式,目前我负责的项目是一个跨端小程序项目,只有测试服和生产服,通过自带的环境变量是可以做到服务环境切换的

但现在有这么一个情况,最近在和服务端联调的时候发现服务端接口问题较多,好几个接口调了一下午还是报错,服务端跟我说能不能直接连他本地的环境,他也就不用老是发版了,也就是说需要增加一个本地服务的环境

基础版:测试服和生产服环境切换

在使用HBuilder X运行项目和打包项目都会有注入环境变量process.env.NODE_ENV,根据它能判断当前运行还是打包项目,示例代码如下,此方式可以满足大多数保只有测试和生产环境的项目

arduino 复制代码
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等通过命令行跑起的项目,如果是使用命令行跑起的项目,你可以在命令行后面注入环境变量来达到多环境的切换

丐版实现:

最精暴的实现方式是直接通过注释打开关闭的方式实现服务环境切换,关键代码如下:

ini 复制代码
// 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,配置关键代码如下:

json 复制代码
{
  ...
  "uni-app": {
    "scripts": {
      "alipay-test": {
        "title": "支付宝小程序 本地环境",
        "env": {
          "UNI_PLATFORM": "mp-alipay",
          "TYPE": "local"
        }
      }
    }
  },
  ...
}

服务切换关键代码如下:

arduino 复制代码
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端注入环境变量,如果有知道的,希望不吝分享,一起学习一起进步

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript