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

相关推荐
拾光拾趣录13 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区24 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到112 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构