uniapp+vite配置环境变量

news2024/11/5 17:10:53

文章目录

  • 前言
  • 一、配置变量
  • 二、定义变量生效
  • 三、脚本执行使其生效
    • 使用
  • 总结
    • `如有启发,可点赞收藏哟~`


前言

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

总结

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

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

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

相关文章

#Prompt | AI | LLM # 人类如何写出LLM理解的Prompt

一、如何写好Prompt 结构化Prompt 结构化Prompt是对信息进行组织,使其遵循特定模式和规则,以便于有效理解信息。常用模块包括: Role: 指定角色,使模型聚焦于特定领域。Profile: 包括作者、版本、语言和描述。Goals: 描述Prompt的…

Qt项目实战:红绿灯小程序

目录 一.初始化对象 二.捕获并处理特定的事件 三.自定义绘制方法 四.绘制外部边框 五.绘制内部边框 六.绘制按钮的背景色 七.绘制覆盖层(高光效果) 八.效果 九.代码 1.h 2.cpp 一.初始化对象 1.设置文本、颜色、边框和背景色等默认值。 2.安…

九泰智库 | 医械周刊- Vol.66

⚖️ 法规动态 北京视觉科学与转化医学研究中心正式成立 北京视觉科学与转化医学研究中心(BERI)于2024年10月26日在清华大学成立,旨在深入贯彻党的二十届三中全会精神,助力健康中国建设,推动全球视觉健康事业发展。该…

我谈正态分布——正态偏态

目录 pdf和cdf参数 标准正态分布期望和方差分布形态 3 σ 3\sigma 3σ原则 正态和偏态正态偏态瑞利分布偏度 (Skewness)峰度 (Kurtosis) 比较 正态分布的英文是Normal Distribution,normal是“正常”或“标准”的意思,中文翻译是正态,多完美的…

Web服务器(理论)

目录 Web服务器www简介常见Web服务程序介绍:服务器主机主要数据浏览器 网址及HTTP简介URLhttp请求方法:2.3 HTTP协议请求的工作流程: www服务器的类型静态网站动态网站 HTTPS简介概念解释SSL协议分为两层SSL协议提供的服务 HTTPS安全通信机制图解过程 快…

解决方案 | 部署更快,自动化程度高!TOSUN同星线控底盘解决方案

Tosun——线控底盘解决方案 在汽车智能化和电动化进程中,智能线控底盘相关的核心技术和产品成为了新能源汽车及智能驾驶产业的重点发展方向。同星智能作为行业先行者,精研汽车电子行业整体解决方案,提供基于TSMaster的底盘HIL仿真测试解决方…

服务器作业(2)

架设一台NFS服务器,并按照以下要求配置 关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 配置文件设置: [rootlocalhost ~]# vim /etc/exports 1、开放/nfs/shared目录,供所有用户查询资料 共享…

架构师备考-软件工程相关补充

目录 软件开发生命周期 软件工程过程 软件维护分类 遗留系统 软件重用 逆向工程 相关概念 抽象层次 需求工程 需求工程主要活动 需求管理的主要活动 需求获取的主要步骤 需求获取方法 需求变更管理的过程 净室软件工程 定义 理论基础 技术手段 应用 缺点 软…

基于SSM+VUE小型企业财务报销管理系统JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档(1万字以上)开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统:Window操作系统 2、开发工具:IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

站大爷代理IP工具的导入功能介绍

在数字化时代,代理IP成为了网络爬虫、数据挖掘等网络活动中不可或缺的工具。站大爷代理IP工具深刻理解用户的需求,提供了多种代理IP导入方式,让代理IP的管理变得简单高效。下面就来详细了解一下这些便捷的导入方法: 一、站大爷AP…

CSP-J2023T4 旅游巴士(同余最短路)

题目链接:https://www.luogu.com.cn/problem/P9751 题意:给定 n 个点, m 条单向边,一个时间间隔 k 。有这样一些限制条件: 1)1号点是入口, n 号点是出口; 2)经过一条边…

React系列教程(2)React哲学

豆约翰习惯将掌握某一技术分为5个层次:初窥门径,小试牛刀,渐入佳境,得心应手,玩转自如 本篇属于React框架中的第1层次即初窥门径 我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方…

「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用

本篇将带你实现一个多选问卷小应用,用户可以勾选选项并点击提交按钮查看选择的结果。通过本教程,你将学习如何使用 Checkbox 组件、动态渲染列表、状态管理及用户交互,构建完整的应用程序。 关键词 UI互动应用Checkbox 组件状态管理动态列表…

【linux 多进程并发】0203 网络资源的多进程处理,子进程完全继承网络套接字,避免“惊群”问题

0203 网络资源的多进程处理 ​专栏内容: postgresql使用入门基础手写数据库toadb并发编程 个人主页:我的主页 管理社区:开源数据库 座右铭:天行健,君子以自强不息;地势坤,君子以厚德载物. 一、概…

江协科技STM32学习- P32 MPU6050

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

程序设计方法与实践-时空权衡

什么是时空权衡? 时空权衡是算法设计中的一个众所周知的问题,也就是对算法的空间和时间效率做出权衡,它大概有分两种形式: 对输入的部分数据或者全部数据作预处理,然后对于获得额外信息储存起来,从而加快…

STM32F1学习——TIM

一、STM32中的定时器 在STM32中分为三种定时器,分别是基本定时器,通用定时器和高级定时器,每种定时器都是向下兼容的。 二、定时器详细介绍 a、基本定时器 基本定时器主要由下面与分频器、计数器 和 自动重装寄存器三个组成的时基单元&#…

W5500-EVB-Pico2评估板介绍

目录 1 概述 2 板载资源 2.1 硬件规格 2.2 硬件规格 2.3 工作条件 3 参考资料 3.1 RP2350 数据手册 3.2 W5500 数据手册 3.3 原理图 原理图 & 物料清单 & Gerber 文件 3.3 尺寸图 (单位 : mm) 3.4 参考例程 认证 CE FCC AWS 资质 Microsoft Azure 认证…

FFmpeg 4.3 音视频-多路H265监控录放C++开发十二:在屏幕上显示多路视频播放,可以有不同的分辨率,格式和帧率。

上图是在安防领域的要求,一般都是一个屏幕上有显示多个摄像头捕捉到的画面,这一节,我们是从文件中读取多个文件,显示在屏幕上。

Oracle视频基础1.4.3练习

15个视频 1.4.3 できない dbca删除数据库 id ls cd cd dbs ls ls -l dbca# delete a database 勾选 # chris 勾选手动删除数据库 ls ls -l ls -l cd /u01/oradata ls cd /u01/admin/ ls cd chris/ ls clear 初始化参数文件,admin,数据文件#新版本了…