uni-app CLI:APP 多环境打包(测试/正式)最简配置 + `import.meta.env` 为 `undefined` 的解决

要达成的效果

  • npm run build:app-plus:test → APP 走测试接口:https://api-test.example.com/prod-api
  • npm run build:app-plus:prod → APP 走正式接口:https://api.example.com/prod-api

需要改的 3 个地方

1).env.build-dev(测试)

ini 复制代码
VITE_API_BASE_URL=https://api-test.example.com

2).env.production(正式)

ini 复制代码
VITE_API_BASE_URL=https://api.example.com

3)package.json(两条命令)

json 复制代码
{
  "scripts": {
    "build:app-plus:test": "uni build --platform app-plus --mode build-dev",
    "build:app-plus:prod": "uni build --platform app-plus --mode production"
  }
}

import.meta.env 为啥在 APP 里会是 undefined

APP 端有些链路下不会稳定保留 import.meta.env。最稳做法是:构建时把域名写死进产物

最简单写法

vite.config.js 注入一个编译期常量:

js 复制代码
define: {
  __VITE_API_BASE_URL__: JSON.stringify(apiBaseUrl)
}

在 使用的地方优先读它:

js 复制代码
const envApiBase =
  typeof __VITE_API_BASE_URL__ !== "undefined"
    ? __VITE_API_BASE_URL__
    : import.meta?.env?.VITE_API_BASE_URL;
相关推荐
Fate_I_C2 小时前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
chQHk57BN3 小时前
跨平台前端开发:用Flutter和UniApp一次编写多端运行
flutter·uni-app
自然 醒17 小时前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
CHB18 小时前
uni-agent,你的数字员工来了
人工智能·uni-app·vibecoding
h_jQuery18 小时前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app
困困的果果头18 小时前
【uniapp】解决H5嵌套在web-view中时打包页面与状态栏重叠
前端·uni-app
前端 贾公子18 小时前
Uniapp 使用 UQRCode 创建二维码
uni-app
Rattenking18 小时前
uni-app组件开发----自定义数字键盘组件
前端·javascript·uni-app
笨笨狗吞噬者20 小时前
代理的妙用:uni-app 小程序是怎样用 `Proxy` 和 `wrapper` 抹平平台差异的
前端·微信小程序·uni-app
软希网分享源码2 天前
中英双语言量化交易投资源码/跟单搬砖区块链交易所源码/前端uniapp纯源码+后端
前端·uni-app·区块链·中英双语言量化交易投资源码