uni-app自定义多环境配置，动态修改appid

背景

在企业级项目开发中，一般都会分为开发、测试、预发布、生产等多个环境，在工程化中使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题，比如接口请求地址，不同环境的请求路径前缀都是不同的。在使用uni-app开发项目时，一般都是选择使用HbuilderX可视化创建项目，也不建议使用cli工程化方式创建uni-app项目。在HbuilderX中，默认只支持开发和生产两个环境，点击“运行”编译出来的代码是开发环境（development），点击“发行”编译出来的代码是生产环境（production），可以通过process.env.NODE_ENV获取当前环境。但在很多企业中，可能就2个环境并不能满足实际场景，同时在开发微信小程序时，测试和生产都是不同的appid，每次部署都要手动修改切换很容易出现问题。为了解决上述问题，通过在package.json中增加uni-app扩展节点，实现自定义条件编译平台，让每种编译具有不同环境标识。再扩展vite.config.js配置文件，用环境标识判断重写文件中的appid。

解决方案

一、创建基础项目

选择默认模板，注意vue版本选择3

![[外链图片转存

二、增加扩展节点

根据官方文档说明，扩展节点配置说明如下：

{
    /**
     * package.json其它原有配置 
     * 拷贝代码后请去掉注释！
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "browser":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }
    }
}

注意：

  • UNI_PLATFORM仅支持填写uni-app默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
  • browser 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值：chrome、firefox、ie、edge、safari、hbuilderx
  • package.json文件中不允许出现注释，否则扩展配置无效
  • vue-cli需更新到最新版，HBuilderX需升级到 2.1.6+

实际使用时，暂时不用的变量直接删除，新建package.json文件，代码如下：

{
    "uni-app": {
        "scripts": {
            "wx-test": {
                "title":"微信小程序 测试环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "NAME": "test"
                 }
            },
            "wx-prod": {
                "title":"微信小程序 生产环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "NAME": "production"
                 }
            },
            "h5-dev": {
                "title":"H5 开发环境",
                "browser":"chrome",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "NAME": "development"
                 }
            },
            "h5-test": {
                "title":"H5 测试环境",
                "browser":"chrome",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "NAME": "test"
                 }
            },
            "h5-prod": {
                "title":"H5 生产环境",
                "browser":"chrome",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "NAME": "production"
                 }
            }
        }
    }
}

上面代码片段只以微信小程序和H5两个端为例，其中只增加了常量NAME用于区分当前环境，类似于process.env.NODE_ENV获取环境变量的作用。一般小程序也就测试和生产两个环境，环境太多都要重新申请账号也麻烦。H5按照常规的配置本地开发、测试、生产三个环境。配置好后我们点击顶部菜单栏的“运行”和“发行”即可看到效果。

在这里插入图片描述
在这里插入图片描述

当在业务里需要使用添加的NAME变量时，直接通过process.env.NAME即可获取。

四、配置其他变量

根目录下新建config目录，用于放一些业务配置项，再新建环境相关变量配置文件env.js，代码如下：

// 不同的环境变量配置
const development = {
    requestBaseUrl: 'http://development', 
    appid: '', 
}

const test = {
    requestBaseUrl: 'http://test',
    appid: 'wxd5xxxxee0fce1c81', 
}

const production = {
    requestBaseUrl: 'http://production',
    appid: 'wx3xxxx1ce403cab3', 
}

export default {
    development,
    test,
    production
}

其中变量对象名称development、test、production要和package.json文件中定义的NAME保持一致，方便后续通过对象方式直接取值。变量对象中添加的是需要根据不同环境配置的变量，比如后端服务请求地址，小程序appid和一些别的插件key。配置后我们就可以配合环境NAME获取到不同环境的其他变量了，简单使用方式如下：

import ENV_CONFIG from '@/config/env.js'
console.log(ENV_CONFIG[process.env.NAME].requestBaseUrl)  // 运行H5 开发环境结果 http://development

每次引入获取方式肯定不够友好，在uni-app中还可以通过修改vite配置添加全局变量，更方便在全局使用。

首先根目录下新建vite.config.js文件，内容如下：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import ENV_CONFIG from './env/index.js'

export default defineConfig({
    plugins: [uni()],
    define: {
        'process.env.config': ENV_CONFIG,
    },
});

通过定义一个全局变量process.env.config，赋值为ENV_CONFIG，process.env.config可以改为任何一个字符串，这里主要是为了保持和默认通过process.env获取环境变量的语义一致性。此时使用时就无需在业务中单独引入，从全局对象process.env.config上取值即可：

console.log(process.env.config[process.env.NAME].requestBaseUrl)  // 运行H5 开发环境结果 http://development

五、动态修改小程序appid

appid是在根目录下的manifest.json文件中，点击后最下面有源码视图。修改的方式就是运用node的fs模块，先读取manifest.json文件，然后根据当前环境，动态替换掉appid或者其他参数，最后重新写入到当前目录下。具体也是在vite.config.js中处理：

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import ENV_CONFIG from './config/env.js'

// 引入fs模块
import fs  from 'fs'

// 读取 manifest.json ，修改后重新写入
const manifestPath = `${__dirname}/manifest.json`;
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' });
function replaceManifest(path, value) {
	const arr = path.split('.');
	const len = arr.length;
	const lastItem = arr[len - 1];    
	let i = 0;
	let ManifestArr = Manifest.split(/\n/);

	for (let index = 0; index < ManifestArr.length; index++) {
		const item = ManifestArr[index];
		if (new RegExp(`"${arr[i]}"`).test(item)) ++i;
		if (i === len) {
			const hasComma = /,/.test(item);
			ManifestArr[index] = item.replace(
				new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`),
				`"${lastItem}": ${typeof value === 'string'? '"'+value+'"' : value}${hasComma ? ',' : ''}`
			);
			break;
		}
	}
	Manifest = ManifestArr.join('\n');
}
// 具体使用，找到对应key值替换为新的值
// replaceManifest('app-plus.usingComponents', false);

const appid = ENV_CONFIG[JSON.parse(process.env.UNI_CUSTOM_DEFINE).NAME].appid
replaceManifest('mp-weixin.appid', appid);

fs.writeFileSync(manifestPath, Manifest, { flag: 'w' });

export default defineConfig({
    plugins: [uni()],
    define: {
        'process.env.config': ENV_CONFIG,
    },
});

这个修改方案是根据官方提供的代码片段修改，其中进行了一些变动：

  • manifest.json文件路径由相对路径改为__dirname获取的绝对路径
  • replaceManifest方法中的value进行了typeof类型判断，如果是字符串加上双引号。因为测试时传个字符串会替换成没引号的变量或者数字

同时关于当前环境变量的获取，此时通过process.env.NAME是获取不到package.json配置的NAME的，通过打印process.env可以发现此时它是个包含很多变量的json，在UNI_CUSTOM_DEFINE下面是可以找到NAME，这样就能根据不同环境获取不同的appid。

在这里插入图片描述

然后也可以用下面这种更容易理解的方式修改manifest.json，但是修改后内容排在一行，想要美观还需要手动格式化。

// appid获取只做参考，这里只是说明简单的只有两个环境，可以直接取process.env.NODE_ENV判断
let appid = process.env.NODE_ENV == "production" ? '生产的appid' : "开发的appid"
// manifest.json 路径
let manifestFileUrl = `${__dirname}/manifest.json`
// 读取文件数据
let manifestFileData = fs.readFileSync(manifestFileUrl, { encoding: 'utf8' });
// 移除// 和 /* */注释
manifestFileData = manifestFileData.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (m, g) => g ? "" : m)
// // 将txt转成obj
let manifestFileDataObj = JSON.parse(manifestFileData)
// 修改指定key对应的value
 manifestFileDataObj['mp-weixin']['appid'] = appid
// 把修改后的对象以json写入文件
fs.writeFileSync(manifestFileUrl, JSON.stringify(manifestFileDataObj), { encoding: 'utf8' })

六、使用方式

  1. 需要本地调试时，点击工具栏“运行”，选择自定义的对应开发或测试环境；
  2. 业务中通过process.env.config[process.env.NAME]获取配置的变量对象；
  3. 上线时，点击工具栏“发行”，选择自定义的对应测试或生产环境；

运行环境

以上代码是运行在Hbuilderx 3.7.9版本，项目为vue3版本，基于vite构建。如在vue2版本上使用，请按照vite.config.js逻辑自行探索配置vue.config.js文件。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/79563.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

虚拟现实与增强现实技术的商业应用

虚拟现实与增强现实技术的商业应用

章节一&#xff1a;引言 随着科技的不断发展&#xff0c;虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;与增强现实&#xff08;Augmented Reality&#xff0c;简称AR&#xff09;技术正日益成为商业领域中的重要创新力量。这两种技术为企业带来了前所未…
阅读更多...
深入源码分析kubernetes informer机制（四）DeltaFIFO

深入源码分析kubernetes informer机制（四）DeltaFIFO

[阅读指南] 这是该系列第四篇 基于kubernetes 1.27 stage版本 为了方便阅读&#xff0c;后续所有代码均省略了错误处理及与关注逻辑无关的部分。 文章目录 client-go中的存储结构DeltaFIFOdelta索引 keyqueue push操作delta push 去重 queue pop操作 总结 client-go中的存储结构…
阅读更多...
CCLINK转MODBUS-TCP网关cclink通讯接线图 终端电阻

CCLINK转MODBUS-TCP网关cclink通讯接线图 终端电阻

大家好&#xff0c;今天我们要聊的是生产管理系统中的CCLINK和MODBUS-TCP协议&#xff0c;它们的不同使得数据互通比较困难&#xff0c;但捷米JM-CCLK-TCP网关的出现改变了这一切。 1捷米JM-CCLK-TCP是一款自主研发的CCLINK从站功能的通讯网关&#xff0c;它的主要功能是将各种…
阅读更多...
PS丢失d3dcompiler_47.dll文件怎么办（附详细修复方法）

PS丢失d3dcompiler_47.dll文件怎么办（附详细修复方法）

我们在安装PS等软件的时候&#xff0c;有可能安装完之后出现以下问题&#xff08;特别是win10或者win11系统&#xff09; 错误&#xff1a; 打开PS的时候出现这个错误&#xff1a;无法启动此程序&#xff0c;因为计算机中丢失D3DCOMPILER_47.dll。尝试重新安装该程序以解决此问…
阅读更多...
[Go版]算法通关村第十一关青铜——理解位运算的规则

[Go版]算法通关村第十一关青铜——理解位运算的规则

目录 数字在计算机中的表示&#xff1a;机器数、真值对机器数进一步细化&#xff1a;原码、反码、补码为何会有原码、反码和补码为何计算机中的按位运算使用的是补码&#xff1f;位运算规则与、或、异或和取反移位运算移位运算与乘除法的关系位运算常用技巧⭐️ 操作某个位的数…
阅读更多...
20W IP网络吸顶喇叭 POE供电吸顶喇叭

20W IP网络吸顶喇叭 POE供电吸顶喇叭

SV-29852T 20W IP网络吸顶喇叭产品简介 产品用途&#xff1a; ◆室内豪华型吸顶喇叭一体化网络音频解码扬声器&#xff0c;用于广播分区音频解码、声音还原作用 ◆应用场地如火车站、地铁、教堂、工厂、仓库、公园停车场等&#xff1b;室内使用效果均佳。 产品特点&#xff…
阅读更多...
linux——MongoDB服务

linux——MongoDB服务

目录 一、MongoDB概述 相关概念 特性 应用场景 二、目录结构 三、默认数据库 admin local config 四、数据库操作 库操作 文档操作 五、MongoDB数据库备份 一、备份 mongodump mongoexport 二、恢复 mongorestore mongoimport ​编辑 一、MongoDB概述 MongoDB是…
阅读更多...
04-微信小程序常用组件-基础组件

04-微信小程序常用组件-基础组件

04-微信小程序常用组件-基础组件 文章目录 基础内容icon 图标案例代码 text 文本案例代码 progress 进度条案例代码 微信小程序包含了六大组件&#xff1a; 视图容器、 基础内容、 导航、 表单、 互动和 导航。这些组件可以通过WXML和WXSS进行布局和样式设置&#xff0c…
阅读更多...
数据库相关面试题

数据库相关面试题

巩固基础&#xff0c;砥砺前行 。 只有不断重复&#xff0c;才能做到超越自己。 能坚持把简单的事情做到极致&#xff0c;也是不容易的。 mysql怎么优化 : MySQL的优化可以从以下几个方面入手&#xff1a; 数据库设计优化&#xff1a;合理设计表结构&#xff0c;选择合适的数…
阅读更多...
Windows下问题定位

Windows下问题定位

1、内存相关知识点&#xff1b; 1&#xff09;windows下32位进程&#xff0c;用户态为2G内存&#xff0c;内核态也为2G内存&#xff1b;却别于linux操作系统&#xff1b; 备注&#xff1a;可以通过命令行与管理员权限&#xff0c;启动3G的用户态空间&#xff0c;但是部…
阅读更多...
数据结构的树存储结构

数据结构的树存储结构

数据结构的树存储结构 之前介绍的所有的数据结构都是线性存储结构。本章所介绍的树结构是一种非线性存储结构&#xff0c;存储的是具有“一对多”关系的数据元素的集合。 (A) (B) 图 1 树的示例 图 …
阅读更多...
同伦问题与同伦算法

同伦问题与同伦算法

同伦问题 据我所知&#xff0c;这篇博客是CSDN上少数几篇讲同伦算法的博客之一考虑同伦算法的目的 扩大初值选取范围解决非线性代数方程组的全部解计算问题 同伦算法中的基本概念 考虑求的解人为地引入参数t,构造一个函数族使得 同时假设的解已知&#xff0c;从出发可以求解对…
阅读更多...
3 Python的数据类型

3 Python的数据类型

概述 在上一节&#xff0c;我们介绍了Python的基础语法&#xff0c;包括&#xff1a;编码格式、标识符、关键字、注释、多行、空行、缩进、引号、输入输出、import、运算符、条件控制、循环等内容。Python是一种动态类型的编程语言&#xff0c;这意味着当你创建一个变量时&…
阅读更多...
星际争霸之小霸王之小蜜蜂（三）--重构模块

星际争霸之小霸王之小蜜蜂（三）--重构模块

目录 前言 一、为什么要重构模块 二、创建game_functions 三、创建update_screen() 四、修改alien_invasion模块 五、课后思考 总结 前言 前两天我们已经成功创建了窗口&#xff0c;并将小蜜蜂放在窗口的最下方中间位置&#xff0c;本来以为今天将学习控制小蜜蜂&#xff0c;结…
阅读更多...
＜CodeGeeX＞基于大模型的全能AI编程助手

＜CodeGeeX＞基于大模型的全能AI编程助手

CodeGeex官网 智谱AI官网 CodeGeex是由清华大学 KEG 实验室和智谱 AI 公司于2023共同训练的代码生成模型 CodeGeeX 开发的AI助手。它基于深度学习技术&#xff0c;能够针对用户的问题和要求提供适当的答复和支持。CodeGeex的功能包括代码生成、自动添加注释、代码翻译以及智能问…
阅读更多...
php base64转图片保存本地

php base64转图片保存本地

调用函数 public function base64(){$img $this->request->param(img);$img data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy…
阅读更多...
Android开发之性能优化：过渡绘制解决方案

Android开发之性能优化：过渡绘制解决方案

1. 过渡绘制 屏幕上某一像素点在一帧中被重复绘制多次&#xff0c;就是过渡绘制。 下图中多个卡片跌在一起&#xff0c;但是只有第一个卡片是完全可见的。背后的卡片只有部分可见。但是Android系统在绘制时会将下层的卡片进行绘制&#xff0c;接着再将上层的卡片进行绘制。但其…
阅读更多...
前端跨域问题解决方法

前端跨域问题解决方法

跨域是WEB浏览器专有的同源限制访问策略。(后台接口调用和postman等工具会出现) 跨源资源共享&#xff08;CORS&#xff0c;或通俗地译为跨域资源共享&#xff09;是一种基于 HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自己以外的其他源&#xff08;域、协议或端…
阅读更多...
【eNSP】交换机（vlan和vlan间通信）

【eNSP】交换机（vlan和vlan间通信）

【eNSP】交换机&#xff08;vlan和vlan间通信&#xff09; 原理术语过程 实验根据图片连接模块配置设备名称和IP地址配置交换机交换机链路指定sw1配置sw2配置 设置网关交换机互联实验设置查看设置结果 ospf配置 原理 HUB集线器&#xff1a;它的作用可以简单的理解为将一些机器…
阅读更多...
智能工厂：适应不断变化的制造世界

智能工厂：适应不断变化的制造世界

制造业已经从过去传统的装配线工艺流程中走了很长一段路。随着技术的进步和工业 4.0 的兴起&#xff0c;制造业正在迅速发展&#xff0c;以满足现代世界不断变化的需求。近年来出现的一个关键概念就是“智能工厂”。在这篇文章中&#xff0c;我们将探讨什么是智能工厂、它是如何…
阅读更多...
最新文章

Copyright @ 2022~2023