最近，公司为项目正式配备了测试环境，这意味着接下来我需要针对各个端（如Web端、移动端等）进行测试环境的打包配置工作。
-
对于采用Vue框架构建的客户端及运营后台，配置测试环境的过程相当直观简便。具体而言，只需在项目根目录下的package.json文件中，于scripts对象内添加一条命令，即可轻松实现针对测试环境的打包构建。
-
移动端项目选用的是uniapp跨端开发框架，这一框架基于Vue.js，旨在实现一套代码的多平台部署，覆盖iOS、Android、Web（响应式设计）、以及广泛的轻应用生态，如微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝的小程序，乃至快应用。鉴于项目启动阶段是借助HBuilder框架直接搭建，而非采用uni-app的CLI脚手架，因此，项目的运行与发布流程主要依赖HBuilder编译器的集成选项来完成。
-
使用HBuilder编译器来创建项目具备显著优势，其中一项便是它提供了便捷的云端打包服务，能够高效生成适用于不同平台的应用包，包括Android的APK和iOS的IPA文件。
-
在uniapp项目中配置环境变量有多种途径，鉴于我们的项目环境与CLI工程及HBuilderX 2.1.5以上版本的要求不匹配，我们将聚焦于适合我们当前状况的两种方法。首先，我们可以通过在package.json文件中添加uni-app特有的扩展字段，来实现基于不同条件的平台编译，这是一种灵活且实用的策略。其次，利用命令行参数--mode指定运行模式，系统会自动加载与之相对应的.env.*环境配置文件，如.env.production或.env.development，从而实现动态配置的切换。
-
考虑到我们的项目是由HBuilder创建的，且后续打包工作需依赖HBuilder编译器完成，因此，我们将采用在package.json中进行配置的方案。这种方法不仅符合我们项目的构建流程，而且能够确保在不同的开发阶段（如开发、测试或生产环境）加载正确的环境变量。
-
我们需要在该文件内添加uni-app相关的属性设置。
{ "uni-app": {// 扩展配置 "scripts": { "H5-TEST": { //自定义编译平台配置，可通过cli方式调用 "title":"h5测试环境", // 在HBuilderX中会显示在 运行/发行 菜单中 "browser":"", //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效 "env": {//环境变量 "UNI_PLATFORM": "h5", //基准平台 "UNI_CUSTOM_NODE_ENV": "test", // ... 其他自定义环境变量 }, "define": { //自定义条件编译 "H5-TEST": true //自定义条件编译常量，建议为大写 } } } } } -
一旦配置工作顺利完成，你将在HBuilder编译器的“发行”选项中直观地看到所设定的环境选项。
-
为了在测试环境中精准地配置项目所需的接口地址及其他参数，你应在项目根目录下新建一个名为.env.test.js的文件。在此文件中，你可以细致地设定测试阶段专用的各项配置，比如API的基地址、数据库连接信息或是任何特定于测试环境的参数。
-
项目根目录下的env.js文件（如果不存在可以创建）添加对于不同环境的处理。
-
这里有必要深入解析，为何我们在判定测试环境时，选择在package.json文件中声明自定义的环境变量，而非直接修改NODE_ENV的预设值。经过广泛查阅社区讨论与全网资料，我们发现了一个共识：在打包构建的过程中，NODE_ENV的值实际上是不可变更的。具体而言，当你在HBuilder中选择“运行”模式时，NODE_ENV会自动被设定为development；而当你切换至“发行”模式，其值则会变为production。鉴于这一特性，直接操作NODE_ENV以区分测试环境变得行不通。
-
因此，我们采取了更为灵活的策略，即在package.json中引入自定义的环境变量，这样不仅可以规避NODE_ENV的限制，还能确保测试环境的独特配置得到准确识别和应用。通过自定义环境变量，我们能够在测试、开发与生产等不同场景间自由切换，同时维持代码的稳定性和环境配置的准确性。
最后，你就可以在整个项目中，通过process.uniEnv[type]去实现不同打包环境使用不同的配置参数啦。
