文章目录
- 前言
- 一、配置变量
- 二、定义变量生效
- 三、脚本执行使其生效
- 使用
- 总结
- `如有启发,可点赞收藏哟~`
前言
查看官方文档
由于官方提示不支持在package.json
配置脚本 --mode xx
(实际H5是可以的,但是在微信小程序等使用import.meta.env
就会报错)
一、配置变量
- package.json (配置对应环境变量)
{
"version": "1.0.0",
"uni-app": {
"scripts": {
"sit": {
"title": "微信小程序——开发测试版",
"env": {
"ENV_TYPE": "sit",
"UNI_PLATFORM": "mp-weixin",
"VITE_BASE_API": "http://127.0.0.1:8080/"
}
},
"uat": {
"title": "微信小程序——验收版",
"env": {
"ENV_TYPE": "test",
"UNI_PLATFORM": "mp-weixin",
"VITE_BASE_API": "http://test.domain/"
}
},
"pro": {
"title": "微信小程序——正式版",
"env": {
"ENV_TYPE": "pro",
"UNI_PLATFORM": "mp-weixin",
"VITE_BASE_API": "http://pro.domain/"
}
}
}
},
...
}
用法
{
/**
* 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+ 版本
二、定义变量生效
- vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
export default defineConfig(({ command, mode }) => {
return {
...
define: {
// "process.env.config": JSON.parse(process.env.UNI_CUSTOM_DEFINE || '{}'), // 也可自定义其他信息
'process.env': process.env, // 配置变量在业务代码内生效
},
...
}
});
三、脚本执行使其生效
npm run dev:custom dev
npm run build:custom pro
由于实际有多个配置可配置sh脚本执行
- run.sh
#!/usr/bin/env bash
# npm run dev:custom weixin-dev
# npm run dev:custom weixin-sit
# npm run dev:custom weixin-uat
# npm run dev:custom weixin-prod
echo "请输入编译环境 dev / sit / uat / prod"
read ENV
if [ "$ENV"x = ""x ]; then
echo "请输入编译环境 dev / sit / uat / prod"
exit 0
fi
echo "开发请输入平台名称, 具体可输入 h5 、 mp-weixin 、mp-alipay 、mp-baidu 、mp-toutiao 、mp-qq"
read PLATFORM
if [ "$PLATFORM"x = ""x ]; then
echo "开发请输入平台名称, 具体可输入 h5 、 mp-weixin 、mp-alipay 、mp-baidu 、mp-toutiao 、mp-qq"
exit 0
fi
cd ../
npm run dev:custom $PLATFORM-$ENV
- build.sh
#!/usr/bin/env bash
# npm run build:custom weixin-dev
# npm run build:custom weixin-sit
# npm run build:custom weixin-uat
# npm run build:custom weixin-prod
echo "请输入编译环境 dev / sit / uat / prod"
read ENV
if [ "$ENV"x = ""x ]; then
echo "请输入编译环境 dev / sit / uat / prod"
exit 0
fi
echo "开发请输入平台名称, 具体可输入 h5 、 mp-weixin 、mp-alipay 、mp-baidu 、mp-toutiao 、mp-qq"
read PLATFORM
if [ "$PLATFORM"x = ""x ]; then
echo "开发请输入平台名称, 具体可输入 h5 、 mp-weixin 、mp-alipay 、mp-baidu 、mp-toutiao 、mp-qq"
exit 0
fi
cd ../
npm run build:custom $PLATFORM-$ENV
使用
在业务代码使用
console.log('onlaunch_', JSON.parse(process.env.UNI_CUSTOM_DEFINE || ''))