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;
相关推荐
郑州光合科技余经理2 天前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
遗憾随她而去.3 天前
uniApp跨端开发: 解决不同平台显示差异问题
uni-app
程序鉴定师6 天前
2026年深圳小程序/App开发公司技术选型指南:从架构设计到交付标准全维度评估
java·小程序·uni-app·php·objective-c
Q26433650236 天前
【有源码】基于uni-app的旅游行程规划小程序-基于微信小程序的智慧文旅综合服务平台
java·微信小程序·小程序·uni-app·毕业设计·springboot·源代码
qq_316837757 天前
阿里云百炼 fun-asr-realtime uniapp vue3 调用
javascript·vue.js·uni-app
特创数字科技7 天前
uniapp 图片全能处理|全平台支持(鸿蒙、安卓、苹果、web),实现九宫格、水印、滤镜、压缩、拼图
uni-app
2501_916007477 天前
苹果应用商店App Store上架费用标准及原因解析
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张8 天前
苹果App Store上架指南:费用、原理与步骤详解
android·ios·小程序·https·uni-app·iphone·webview
特创数字科技8 天前
【uni-app x】告别系统相机限制!三端通用自定义相机组件:任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定
前端·数码相机·uni-app
Martin -Tang8 天前
uniapp app嵌套webview 弹窗方式
android·ios·uni-app