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;
相关推荐
lhldsg4 小时前
家政派单系统开发实战:从需求分析到智能调度全流程指南
java·junit·小程序·uni-app·需求分析
PedroQue999 小时前
v2.6.0 新增全局返回守卫与 iOS 侧滑拦截,补齐跨端路由拦截能力
前端·uni-app
蜡台16 小时前
Uniapp 开发H5 页面跳转拦截
前端·javascript·uni-app
宠友信息1 天前
内容社区源码开发实践解析,用Spring Boot打造1:1仿小红书源码平台
java·spring boot·redis·websocket·mysql·spring·uni-app
梦曦i1 天前
Vue-Router 2.4.0 新增可控重定向功能
前端·uni-app
郑州光合科技余经理1 天前
海外版外卖系统架构:订单怎么流转、权限怎么分
java·开发语言·前端·系统架构·uni-app·php·ai编程
qq_316837752 天前
uniapp 安卓/H5 使用 contentEditable 属性 富文本编辑器
android·javascript·uni-app
小满zs2 天前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app
sunphp开发者3 天前
制作手绘地图瓦片切图
前端·uni-app
梦曦i4 天前
RouterLink v2.5.0:H5端原生能力全面回归
前端·uni-app