uniapp+vite配置环境变量

前言

查看官方文档
由于官方提示不支持在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 || ''))

总结

如有启发，可点赞收藏哟~