uniapp H5、小程序、APP端自定义不同运行环境（开发、测试、生产）、自定义条件编译平台、以及动态修改manifest.json值讲解

news2024/11/23 11:42:52

文章目录

  • 前言
  • 一、自定义条件编译平台是什么？
  • 二、新增自定义条件编译平台
  • 三、动态设置服务器请求地址
    • 四、动态修改manifest.json
      • 1.根目录新增文件 modifyManifest.js
      • 2.vue.config.js引入modifyManifest.js
    • 总结
    • 示例代码

前言

企业项目开发流程上一般都要配置多个运行环境（不同的服务器请求地址）。不同环境有不同用途，主要用于区分开发、测试、上线，对应的环境称为开发环境、测试环境、生产环境。实际开发中经常要在不同环境进行联调或者打包，对于uniapp每次都要手动修改服务请求地址很是麻烦，有什么方法能实现按需运行按需打包呢，答案是——自定义条件编译平台

一、自定义条件编译平台是什么？

HBuildex默认编译平台例如有H5端、小程序端、APP端,像小程序端细分还有微信小程序，钉钉小程序等，不同编译平台我们可以用条件编译来指定特殊代码运行在哪种平台上。例如：

         // #ifdef H5   
	    let	baseUrl = 'h5'         //H5端才执行
		// #endif	
		// #ifdef MP-WEIXIN
     	let	baseUrl ='weixin' 		//微信小程序端才执行
		// #endif

而所有编译平台我们都可以在编辑器-运行菜单或者发现菜单下找到，自定义新的条件编译平台其实就是在编辑器发现/运行菜单新增一种编译类型，并和上面一样支持条件编译。
在这里插入图片描述

更多的条件编译官方文档说明可以点击查看

二、新增自定义条件编译平台

uni-app 通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台。
例如：

"uni-app": {
        "scripts": {
            "h5-dev": {
                "title": "h5开发环境",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "ENV_TYPE": "h5-dev"
                },
                "define": {
                    "H5-DEV": true
                }
            }
            .....

字段说明：

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

如果项目没有package.json文件可通过npm init初始化出来

注意说明：

  1. UNI_PLATFORM只支持下列值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq，不支持app端，也即只支持小程序和H5自定义条件编译平台
  2. package.json文件中不允许出现注释，否则扩展配置无效

uniapp默认运行是开发环境，打包是生产环境，可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。

if (process.env.NODE_ENV === 'development') {
	console.log('开发环境');
} else {
	console.log('生产环境');
}

通过上面字段配置说明可以看到env下我们可以自定义字段来标识该编译平台的环境变量 ,例如上面截图1那样，可以通过process.env.ENV_TYPE来获取环境值

console.log(process.env.ENV_TYPE)//h5-dev

通过自定义节点扩展可以在编辑器运行或者发现下拉菜单看到新增的编译平台（自定义环境）

在这里插入图片描述

更多package.json配置说明点击查看

三、动态设置服务器请求地址

  • 先定义各端环境变量文件env.js
// h5开发环境
const h5Dev = {
	baseUrl: 'https://devh5.....'
}

// h5测试环境
const h5Test= {
	baseUrl: 'https://testh5.....'

}

// h5生产环境
const h5Prod= {
	baseUrl: 'https://prodh5.....'

}

// 微信小程序开发环境
const mpWeixinDev = {
	baseUrl: 'https://devwx.....'
}

// 微信小程序测试环境
const mpWeixinTest= {
	baseUrl: 'https://testwx.....'

}

// 微信小程序生产环境
const mpWeixinProd= {
	baseUrl: 'https://productionwx.....'

}
// app开发环境
const appDev = {
	baseUrl: 'https://devApp.....'
}

// app测试环境
const appTest= {
	baseUrl: 'https://testApp.....'

}

// app生产环境
const appProd= {
	baseUrl: 'https://productionApp.....'

}


const envConfig = {
	'h5-dev':h5Dev,
	'h5-test':h5Test,
	'h5-prod':h5Prod,
	'mp-weixin-dev':mpWeixinDev,
	'mp-weixin-test':mpWeixinTest,
	'mp-weixin-prod':mpWeixinProd,
	'app-dev':appDev,
	'app-test':appTest,
	'app-prod':appProd,	
}
module.exports=envConfig

此处定义的环境字段要跟package.json对应环境字段一致

  • package.json添加H5和小程序自定义环境
{
  {
    "name": "",
    "version": "1.0.1",
    "description": "",
    "main": "main.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "uni-app": {
        "scripts": {
            "h5-dev": {
                "title": "h5开发环境",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "ENV_TYPE": "h5-dev"
                },
                "define": {
                    "H5-DEV": true
                }
            },
            "h5-test": {
                "title": "h5测试环境",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "ENV_TYPE": "h5-test"
                },
                "define": {
                    "H5-TEST": true
                }
            },
            "h5-prod": {
                "title": "h5生产环境",
                "env": {
                    "UNI_PLATFORM": "h5",
                    "H5_NODE_ENV": "h5-prod"
                },
                "define": {
                    "H5-PROD": true
                }
            },
            "mp-weixin-dev": {
                "title": "小程序开发环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "ENV_TYPE": "mp-weixin-dev"
                },
                "define": {
                    "MP-WEIXIN-DEV": true
                }
            },
            "mp-weixin-test": {
                "title": "小程序测试环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "ENV_TYPE": "mp-weixin-test"
                },
                "define": {
                    "MP-WEIXIN-TEST": true
                }
            },
            "mp-weixin-prod": {
                "title": "小程序生产环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "ENV_TYPE": "mp-weixin-prod"
                },
                "define": {
                    "MP-WEIXIN-PROD": true
                }
            }
        }
    },
  }
}

此处ENV_TYPE定义值最好和编译平台名称字段一致

  • request.js接口请求动态获取baseUrl
import envConfig from './env.js'
//服务器请求地址
const baseUrl = envConfig[process.env.ENV_TYPE].baseUrl

至此小程序端和H5好像没啥问题了，但是APP端不支持自定编译平台，所以只能手动切换

import envConfig from './env.js'
const appEnv="app-dev";//定义一个变量控制APP端环境
// #ifndef APP
const baseUrl = envConfig[process.env.ENV_TYPE].baseUrl
// #endif
// #ifdef APP
const baseUrl = envConfig[appEnv].baseUrl
// #endif

从上面代码看我们定义了一个appEnv变量来手动控制APP打包或运行环境，只需每次手动切换即可。

到此三端配置是不是结束了？仔细想想——H5端有个大问题，我们知道H5端有跨域问题一般不能直接访问baseUrl，在开发时候常规做法是通过manifest.json下配置代理解决跨域问题。
例如：

manifest.json

"h5" : {
        "devServer" : {
            "disableHostCheck" : true,
            //配置代理
            "proxy" : {
                "/api" : {
                    "target" : "https://devh5.....",//h5开发环境
                    "changeOrigin" : true,
                    "secure" : false,
                    "ws" : true
                }
            }
        }
    },

显然问题转化为根据不同编译环境动态修改target值，比如运行h5测试环境，target值就要变成env.js定义的h5Test.baseUrl

四、动态修改manifest.json

说明：manifest.json下是无法读取process.env.ENV_TYPE值，我们只能通过node文件流写入方式去修改target值

具体如下：

1.根目录新增文件 modifyManifest.js

写入：

const fs = require('fs')
//自定义的环境变量根据实际对应路径引入
const envConfig=require('./config/env.js')
//读取manifest.json内容
fs.readFile(`${__dirname}/manifest.json`, (error, res)=> {
	if (!error) {
		let data = JSON.parse(res.toString());
		//此时process.env.ENV_TYPE依然无法读取到但是可以读取process.env.UNI_SCRIPT,该值为自定义编译平台配置字段名称，这就是上面取字段时候要求和自定义编译平台字段一样原因
		let env =process.env.UNI_SCRIPT
		if (env&&env.includes('h5')) {
			if ( data?.h5?.devServer?.proxy) {
				let proxy= data.h5.devServer.proxy
				for (let key in proxy) {
					proxy[key].target =envConfig[env].baseUrl
				}
				// console.log(JSON.stringify(data.h5),'proxy')
			   //重新写入修改后内容
				fs.writeFile(
				      `${__dirname}/manifest.json`,
				      JSON.stringify(data),
				      {
				        encoding: 'utf-8'
				      },
				       (error)=>{
				        if (error) {
				          console.log(error,'修改失败')
				        } else {
				          console.log('修改成功')
				        }
				      }
				    )
				
			}
		}
	}
})

2.vue.config.js引入modifyManifest.js

vue.config.js(没有该文件新建，位于项目根目录)新增：

require('./modifyManifest.js')

注意：兼容性写法此处用require非import

至此，每次通过运行-编译不同的环境，编辑器会动态修改manifest.json-target值，代理指向对应的环境

总结

通过上面介绍我们实现了自定义编译平台、自定义环境运行和打包，了解了如何动态修改manifest.json内部值，也可以根据实际场景需求扩展比如动态修改小程序appid值、不同自定义环境运行不同逻辑代码等扩展。

示例代码

传送门：点击查看

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows Server 2012R2 修复CVE-2016-2183(SSL/TLS)漏洞的办法

Windows Server 2012R2 修复CVE-2016-2183(SSL/TLS)漏洞的办法

一、漏洞说明 Windows server 2012R2远程桌面服务SSL加密默认是开启的，且有默认的CA证书。由于SSL/ TLS自身存在漏洞缺陷，当开启远程桌面服务，使用漏洞扫描工具扫描，发现存在SSL/TSL漏洞。远程主机支持的SSL加密算法提供了中等强度的加密算法，目前，使用密钥长度大于等于5…
阅读更多...
SQLite 和 SQLiteDatabase 的使用

SQLite 和 SQLiteDatabase 的使用

实验七：SQLite 和 SQLiteDatabase 的使用 7.1 实验目的 本次实验的目的是让大家熟悉 Android 中对数据库进行操作的相关的接口、类等。SQLiteDatabase 这个是在 android 中数据库操作使用最频繁的一个类。通过它可以实现数据库的创建或打开、创建表、插入数据、删…
阅读更多...
Joint Cross-Modal and Unimodal Features for RGB-D Salient Object Detection

Joint Cross-Modal and Unimodal Features for RGB-D Salient Object Detection

提出的模型 the outputs H i m _i^m im​ from the unimodal RGB or depth branch in MFFM FFM means ‘Feature Fusion Module’ 作者未提供代码
阅读更多...
【Vue】图片切换

【Vue】图片切换

上一篇&#xff1a; vue的指令 https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5502 本篇所需要的指令有&#xff1a; v-on v-bind v-show <!DOCTYPE html> <html lang"en"> <head><meta charset"…
阅读更多...
【JVM】一篇通关JVM垃圾回收

【JVM】一篇通关JVM垃圾回收

目录 1. 如何判断对象可以回收1-1. 引用计数法1-2. 可达性分析算法1-3. 四种引用强引用软引用弱引用虚引用终结器引用 2. 垃圾回收算法3. 分代垃圾回收4. 垃圾回收器5. 垃圾回收调优 1. 如何判断对象可以回收 1-1. 引用计数法 引用计数法 只要一个对象被其他变量所引用&…
阅读更多...
JSP：JDBC

JSP：JDBC

JDBC&#xff08;Java Data Base Connectivity的缩写&#xff09;是Java程序操作数据库的API&#xff0c;也是Java程序与数据库相交互的一门技术。 JDBC是Java操作数据库的规范&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;它对数据库的操作提供基本方法&#…
阅读更多...
2023-11-24--oracle--实验--[Merge 语句]

2023-11-24--oracle--实验--[Merge 语句]

oracle--实验---Merge语句 1.认知Merge 语句 • merge 语句是 sql 语句的一种。在 SQL server 、 Oracle 数据库中可用&#xff0c; MySQL 中不可用。 • merge 用来合并 update 和 insert 语句。目的&#xff1a;通过 merge 语句&#xff0c;根据一张表&#xff08; 原数据表…
阅读更多...
superset 后端增加注册接口

superset 后端增加注册接口

好烦啊-- &#xff1a;< 1.先定义modes: superset\superset\models\user.py # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional information…
阅读更多...
JSP EL表达式之 empty

JSP EL表达式之 empty

好 本文我们还是继续说EL表达式 我们来讲一个非空判断的好手 empty 我们直接编写代码如下 <% page contentType"text/html; charsetUTF-8" pageEncoding"UTF-8" %> <%request.setCharacterEncoding("UTF-8");%> <!DOCTYPE html&…
阅读更多...
探索亚马逊云科技云存储服务的性能

探索亚马逊云科技云存储服务的性能

文章作者&#xff1a;Libai 引言 随着企业越来越多地依赖云存储解决方案&#xff0c;确保存储性能的最佳状态变得至关重要。在本文中&#xff0c;我们将探讨在亚马逊云科技云存储服务上进行存储性能基准测试的重要性&#xff0c;以及如何帮助企业做出资源分配和优化的明智决策…
阅读更多...
小程序中的大道理之二--抽象与封装

小程序中的大道理之二--抽象与封装

继续扒 接着 上一篇 的叙述, 健壮性也有了, 现在是时候处理点实际的东西了, 但我们依然不会一步到底, 让我们来看看. 一而再地抽象(Abstraction Again) 让我们继续无视那些空格以及星号等细节, 我们看到什么呢? 我们只看到一整行的内容, 当传入 3 时就有 3 行, 传入 4 时就…
阅读更多...
postgresql从入门到精通 - 第35讲：中间件PgBouncer部署|PostgreSQL教程

postgresql从入门到精通 - 第35讲：中间件PgBouncer部署|PostgreSQL教程

PostgreSQL从小白到专家&#xff0c;是从入门逐渐能力提升的一个系列教程&#xff0c;内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容&#xff0c;希望对热爱PG、学习PG的同学们有帮助&#xff0c;欢迎持续关注CUUG PG技术大讲堂。 第35讲&#…
阅读更多...
Linux加强篇002-部署Linux系统

Linux加强篇002-部署Linux系统

目录 前言 1. shell语言 2. 执行命令的必备知识 3. 常用系统工作命令 4. 系统状态检测命令 5. 查找定位文件命令 6. 文本文件编辑命令 7. 文件目录管理命令 前言 悟已往之不谏&#xff0c;知来者之可追。实迷途其未远&#xff0c;觉今是而昨非。舟遥遥以轻飏&#xff…
阅读更多...
SpringBoot : ch05 整合Mybatis

SpringBoot : ch05 整合Mybatis

前言 随着Java Web应用程序的快速发展&#xff0c;开发人员需要越来越多地关注如何高效地构建可靠的应用程序。Spring Boot作为一种快速开发框架&#xff0c;旨在简化基于Spring的应用程序的初始搭建和开发过程。而MyBatis作为一种优秀的持久层框架&#xff0c;提供了对数据库…
阅读更多...
【微服务专题】SpringBoot自动配置源码解析

【微服务专题】SpringBoot自动配置源码解析

目录 前言阅读对象阅读导航前置知识笔记正文0、什么是自动配置0.1 基本概念0.2 SpringBoot中的【约定大于配置】0.3 从SpringMVC看【约定大于配置】0.4 从Redis看【约定大于配置】 一、EnableAutoConfiguration源码解析二、SpringBoot常用条件注解源码解析2.1 自定义条件注解2.…
阅读更多...
web前端开发基础----标准流布局和非标准流布局

web前端开发基础----标准流布局和非标准流布局

1&#xff0c;标准流布局 标准流&#xff0c;也称文档流或普通流&#xff0c;是所有元素默认的布局方式。 在标准流中&#xff0c;元素按照其在 HTML 中出现的顺序&#xff0c;自上而下依次排列&#xff0c;并占据其父容器内的可用空间。 标准流中的元素按照其自然尺寸和位置进…
阅读更多...
Oracle研学-介绍及安装

Oracle研学-介绍及安装

一 ORACLE数据库特点: 支持多用户&#xff0c;大事务量的事务处理数据安全性和完整性控制支持分布式数据处理可移植性(跨平台&#xff0c;linux转Windows) 二 ORACLE体系结构 数据库&#xff1a;oracle是一个全局数据库&#xff0c;一个数据库可以有多个实例&#xff0c;每个…
阅读更多...
【Rust日报】2023-11-22 Floneum -- 基于 Rust 的一款用于 AI 工作流程的图形编辑器

【Rust日报】2023-11-22 Floneum -- 基于 Rust 的一款用于 AI 工作流程的图形编辑器

Floneum -- 基于 Rust 的一款用于 AI 工作流程的图形编辑器 Floneum 是一款用于 AI 工作流程的图形编辑器&#xff0c;专注于社区制作的插件、本地 AI 和安全性。 Floneum 有哪些特性&#xff1a; 可视化界面&#xff1a;您无需任何编程知识即可使用Floneum。可视化图形编辑器可…
阅读更多...
【数据库篇】关系模式的表示——（1）问题的提出

【数据库篇】关系模式的表示——（1）问题的提出

1、关系模式的表示 R&#xff1a;表示关系的名字比如&#xff1a;sc选课表&#xff0c;student学生表。 U&#xff1a;表示一个关系模式的所有属性&#xff0c;比如student表&#xff1a;U&#xff08;sno&#xff0c;sname&#xff0c;sage&#xff0c;ssex&#xff09;。 …
阅读更多...
代码随想录算法训练营第五十四天|392.判断子序列 115.不同的子序列

代码随想录算法训练营第五十四天|392.判断子序列 115.不同的子序列

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 392.判断子序列 class Solution:def isSubsequence(self, s: str, t: str) -> bool:dp [[0] * (len(t)1) for _ in range(len(s)1)]for i in ra…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023