uniapp 多环境打包

uni-app 项目中配置环境变量主要有如下三种方式:

第一种:vue-config.js

在 vue.config.js 中可以修改 webpack 配置,包括环境变量,具体参考 vue-config.js。

https://uniapp.dcloud.net.cn/collocation/vue-config.html

第二种:package.json

在自定义条件编译平台时,可以在 package.json 文件的 env 节点下配置环境变量,具体参考 package.json

package.json扩展配置用法:

bash 复制代码
{
    /**
     * 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+ 版本

第三种:.env

HBuilderX 中的 uni-app vue3 和 uni-app x (4.25+) 项目及 CLI 创建的项目中可以在根目录中放置 .env 文件来指定环境变量

环境变量和模式:

bash 复制代码
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量,这些变量在构建时会被静态地替换掉。这里有一些在所有情况下都可以使用的内建变量:
import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境(使用 NODE_ENV='production' 运行开发服务器或构建应用时使用 NODE_ENV='production' )。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

.env 文件

.env # 所有情况下都会加载

.env.local # 所有情况下都会加载,但会被 git 忽略

.env.[mode] # 只在指定模式下加载

.env.[mode].local # 只在指定模式下加载,但会被 git 忽略

bash 复制代码
环境加载优先级
一份用于指定模式的文件(例如 .env.production)会比通用文件的优先级更高(例如 .env)。
Vite 总是会加载 .env 和 .env.local 文件,除此之外还会加载模式特定的 .env.[mode] 文件。在模式特定文件中声明的变量优先级高于通用文件中的变量,但仅在 .env 或 .env.local 中定义的变量仍然可以在环境中使用。
另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被 .env 类文件覆盖。例如当运行 VITE_SOME_KEY=123 vite build 的时候。
.env 类文件会在 Vite 启动一开始时被加载,而改动会在重启服务器后生效。
相关推荐
2501_916013742 小时前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
0x0002 小时前
Uniapp - 自定义 Tabbar 实现
前端·uni-app
SY_FC2 小时前
uniapp发布成 微信小程序 主包内 main.wxss 体积太大
微信小程序·小程序·uni-app
你很易烊千玺3 小时前
即时通讯小程序
小程序·uni-app·直播
风雨兼程^_^3 小时前
ai生成文章,流式传输(uniapp,微信小程序)
ai·微信小程序·uni-app·流式传输
2501_9159184112 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_9151063212 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
iOS阿玮19 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
2501_9160137421 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918411 天前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview