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

文章目录

  • 前言
  • 一、自定义条件编译平台是什么？
  • 二、新增自定义条件编译平台
  • 三、动态设置服务器请求地址
    • 四、动态修改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.mfbz.cn/a/188613.html

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

相关文章

【Linux】 sudo命令使用

【Linux】 sudo命令使用

sudo sudo是linux系统管理指令，是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具，如halt，reboot，su等等。这样不仅减少了root用户的登录 和管理时间，同样也提高了安全性。sudo不是对shell的一个代替…
阅读更多...
ubuntu修改系统语言

ubuntu修改系统语言

修改ubuntu系统语言 操作指令修改系统设置总结 操作 ubuntu系统自带的英文环境，个人觉得用起来不方便。改掉吧。换成中文 指令修改 参考了一些博客的解决方式 ctrlartT 打开终端。 sudo apt-get install language-pack-zh-hans 输入下载汉化包的指令。 但是&…
阅读更多...
Spring 拾枝杂谈—Spring原生容器结构剖析（通俗易懂）

Spring 拾枝杂谈—Spring原生容器结构剖析（通俗易懂）

目录 一、前言 二、Spring快速入门 1.简介 : 2. 入门实例 : 三、Spring容器结构分析 1.bean配置信息的存储 : 2.bean对象的存储 : 3.bean-id的快捷访问 : 四、总结 一、前言 开门见山，11.25日开始我们正式进入Java框架—Spring的学习，此前&…
阅读更多...
作为Java初学者，如何快速学好Java？

作为Java初学者，如何快速学好Java？

作为Java初学者，如何快速学好Java？ 开始的一些话 对于初学者来说，编程的学习曲线可能相对陡峭。这是正常现象，不要感到沮丧。逐步学习，循序渐进。 编程是一门实践性的技能，多写代码是提高的唯一途径。尽量…
阅读更多...
从入门到精通：JMeter接口测试全流程详解！

从入门到精通：JMeter接口测试全流程详解！

利用Jmeter做接口测试怎么做呢？过程真的是超级简单。 明白了原理以后，把零碎的知识点填充进去就可以了。所以在学习的过程中，不管学什么，我一直都强调的是要循序渐进，和明白原理和逻辑。这篇文章就来介绍一下如何利用…
阅读更多...
[Java]线程详解

[Java]线程详解

Java线程 一、线程介绍 程序 是为完成特定任务、用某种语言编写的一组指令的集合（简单来说就是写的代码）。 进程 进程是指运行中的程序，比如我们使用的QQ，就启动了一个进程，操作系统会对该进程分配内存空间。当我…
阅读更多...
音频——S/PDIF

音频——S/PDIF

文章目录 BMC 编码字帧(sub-frame)格式帧(frame)格式参考S/PDIF 是 SONY 和 Philips 公司共同规定的数字信号传输规范，其实就是在 AES/EBU 上进行改动的家用版本。IEC60958 的标准规范囊括了以上两个规范。spdif 采用了双相符号编码（BMC），是将时钟信号和数据信号混合在一起…
阅读更多...
Python---函数的参数类型----位置参数（不能顺序乱）、关键词参数（键值对形式，顺序可乱）

Python---函数的参数类型----位置参数（不能顺序乱）、关键词参数（键值对形式，顺序可乱）

位置参数 理论上，在函数定义时，可以为其定义多个参数。但是在函数调用时，也应该传递多个参数，正常情况，要一一对应。 相关链接：Python---函数的作用，定义，使用步骤（调用…
阅读更多...
【Java程序员面试专栏 专业技能篇 】Java SE核心面试指引（四）：Java新特性

【Java程序员面试专栏 专业技能篇 】Java SE核心面试指引（四）：Java新特性

关于Java SE部分的核心知识进行一网打尽，包括四部分：基础知识考察、面向对象思想、核心机制策略、Java新特性，通过一篇文章串联面试重点，并且帮助加强日常基础知识的理解，全局思维导图如下所示 本篇Blog为第四部分：Java新特性，子节点表示追问或同级提问 Java8新特性…
阅读更多...
Linux内核中的overlay文件系统

Linux内核中的overlay文件系统

一、简介 Docker 内核实现容器的功能用了linux 内核中的三个特性 Namespace、Cgroup、UnionFs，今天我们来说一下UnionFs。 linux UnionFs 实现的是overlay 文件系统 OverlayFs 文件系统分为三层， lower 是只读层 Upper 是可读写 Merged 是 lower 和U…
阅读更多...
[AutoSAR 存储] 汽车智能座舱的存储需求

[AutoSAR 存储] 汽车智能座舱的存储需求

公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《AutoSAR 存储》 <<<< 返回总目录 <<<< 1 智能座舱的发展&#xff1a; 1.1 发展历史 车辆信息娱乐系统的发展可以分为三个阶段。 机械化阶段 在上世纪90年代&#xff0c;车辆仪表盘…
阅读更多...
⑥【bitmap 】Redis数据类型： bitmap [使用手册]

⑥【bitmap 】Redis数据类型： bitmap [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Redis bitmap ⑥Redis bitmap 基本操作命令1. …
阅读更多...
【前端】数据行点击选择

【前端】数据行点击选择

前言 【前篇文章】说了，我们公司的核心价值就是让人越来越懒，能怎么便捷就怎么便捷，主打一个简单实用又快捷，为了实现这个目标，我看成这个列表陷入了深思在想，要不要子表的数据加载在点击这个行时，就可以展示数据，这样就不用每次都要点那个小圆圈啦。 查资料 这显然…
阅读更多...
卷积神经网络（Inception-ResNet-v2）交通标志识别

卷积神经网络（Inception-ResNet-v2）交通标志识别

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;2. 导入数据3. 查看数据 二、构建一个tf.data.Dataset1.加载数据2. 配置数据集 三、构建Inception-ResNet-v2网络1.自己搭建2.官方模型 五、设置动态学习率六、训练模型七、模型评…
阅读更多...
VUE限制文件上传大小和上传格式

VUE限制文件上传大小和上传格式

<el-form-item label"图片&#xff1a;" prop"tempImagePath"><el-uploadclass"upload"accept"image/jpeg":show-file-list"false"list-type"picture-card":headers"{ token: token}":action&…
阅读更多...
postman自动化运行接口测试用例

postman自动化运行接口测试用例

做过接口测试的人&#xff0c;应该都知道postman &#xff0c;我们在日常的时候都可以利用postman做接口测试&#xff0c;我们可以把接口的case保存下来在collection里面&#xff0c;那么可能会有这样的需求&#xff0c;我们怎么把collection的用例放到jenkins中定时执行呢&…
阅读更多...
2023-11-24 LeetCode每日一题（统计和小于目标的下标对数目）

2023-11-24 LeetCode每日一题（统计和小于目标的下标对数目）

2023-11-24每日一题 一、题目编号 2824. 统计和小于目标的下标对数目二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始长度为 n 的整数数组 nums 和一个整数 target &#xff0c;请你返回满足 0 < i < j < n 且 nums[i] nums[j] < targe…
阅读更多...
2023 最新 PDF.js 在 Vue3 中的使用

2023 最新 PDF.js 在 Vue3 中的使用

因为自己写业务要定制各种 pdf 预览情况&#xff08;可能&#xff09;&#xff0c;所以采用了 pdf.js 而不是各种第三方封装库&#xff0c;主要还是为了更好的自由度。 一、PDF.js 介绍 官方地址 中文文档 PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。 pdf.js 是社区…
阅读更多...
文献速递：人工智能在新生儿重症监护室：现在是时候了

文献速递：人工智能在新生儿重症监护室：现在是时候了

人工智能在新生儿重症监护室&#xff1a;现在是时候了 01 文献速递介绍 文章介绍了AI的多学科特性&#xff0c;包括计算机科学、数学、神经科学和哲学。AI的目标是通过各种计算和算法技术创建智能机器。尽管早期对人类水平AI的预测未能实现&#xff0c;但对AI的期待仍然强烈…
阅读更多...
PC端从零搭建微信自动回复机器人（一）基础框架搭建及源码

PC端从零搭建微信自动回复机器人（一）基础框架搭建及源码

由于工作需要&#xff0c;最近一年一直在研究和使用C#&#xff0c;加上最近工作上有做微信机器人的需要&#xff0c;在已经对接、调试稳定之后&#xff0c;将项目的源码分享给大家&#xff0c;传递开源精神。 一、环境依赖 1、开发工具&#xff1a;Vistual Studio 2022 2、Ne…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站