Vue import.meta.env 讲解

好，这个问题问得非常到位 👍

我直接把 import.meta.env 里"分别是啥" 给你一项一项拆开讲，不绕弯子。

---

一、一句话总览

import.meta.env

👉 Vite 注入给前端的环境变量集合对象

它由 两部分组成：

1. Vite 内置变量
2. 你自己在 .env* 里定义的 VITE_ 变量

---

二、Vite 内置的（必有）

这些不用你配，Vite 自动给。

1️⃣ import.meta.env.MODE

import.meta.env.MODE

值	含义
development	开发
production	生产
test	测试

📌 等价于你启动时的 --mode

---

2️⃣ import.meta.env.DEV

import.meta.env.DEV

• true：开发环境
• false：非开发

等价于：

import.meta.env.MODE === 'development'

---

3️⃣ import.meta.env.PROD

import.meta.env.PROD

• true：生产环境
• false：非生产

---

4️⃣ import.meta.env.BASE_URL

import.meta.env.BASE_URL

👉 对应 vite.config.js 里的：

export default defineConfig({
  base: '/'
})

常用于：

• 静态资源路径
• 子路径部署

---

三、你自己定义的（VITE_ 开头）

来自 .env 文件。

示例 .env.development

VITE_APP_BASE_API=http://localhost:8080
VITE_APP_ENV=development

---

5️⃣ import.meta.env.VITE_APP_BASE_API

import.meta.env.VITE_APP_BASE_API

👉 后端接口地址

你项目里最常用的那个：

axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_API

---

6️⃣ import.meta.env.VITE_APP_ENV

import.meta.env.VITE_APP_ENV

一般用来做业务环境判断：

if (import.meta.env.VITE_APP_ENV === 'production') {
  // 生产逻辑
}

---

四、真实运行时 import.meta.env 长啥样？

你在浏览器里 console.log(import.meta.env)，会看到类似：

{
  BASE_URL: "/",
  MODE: "development",
  DEV: true,
  PROD: false,
  VITE_APP_BASE_API: "http://localhost:8080",
  VITE_APP_ENV: "development"
}

---

五、为什么有的变量你"拿不到"？

❌ 没有 VITE_ 前缀

API_URL=http://localhost:8080

import.meta.env.API_URL // undefined

✅ 必须：

VITE_API_URL=http://localhost:8080

---

六、⚠️ 常见误区（重点）

❌ 1️⃣ 改 .env 不重启

👉 必须重启 Vite

---

❌ 2️⃣ 当 Node 环境变量用

process.env.NODE_ENV // ❌ Vite 不推荐

✅ 用：

import.meta.env.MODE

---

❌ 3️⃣ 在非 Vite 项目用

import.meta.env // undefined

---

七、最重要的记忆口诀（送你）

内置看 MODE / DEV / PROD
自定义一定 VITE_

---

如果你愿意，我可以下一步直接帮你：

• 对照你现在项目 逐个解释你已有的 env 变量
• 或 帮你设计一套规范的 env 命名方案（前后端通用）

问题：import.meta.env.VITE_APP_BASE_API 我有.env.development .env.production .env.staging三个，那它应用的是哪个

这个问题非常关键 ，也是很多人对 Vite 最容易迷糊的点之一。

我直接给你 一句话结论 + 完整规则 + 你这个项目的实际情况。

---

一、一句话结论（先记住）

import.meta.env.VITE_APP_BASE_API 用的是：
👉 当前启动时的 mode 对应的 .env.[mode] 文件

---

二、Vite 选择 .env 的完整规则（官方机制）

Vite 启动时会按 mode 加载这些文件（优先级从低到高）：

.env
.env.[mode]

并且 后加载的覆盖先加载的

---

例子：mode = development

加载顺序：

.env
.env.development   ✅ 最终生效

---

mode = production

.env
.env.production    ✅ 最终生效

---

mode = staging

.env
.env.staging       ✅ 最终生效

---

三、关键点：mode 是谁决定的？

1️⃣ vite / npm run dev

vite

等价于：

vite --mode development

👉 默认 mode = development

---

2️⃣ vite build

vite build

等价于：

vite build --mode production

👉 默认 mode = production

---

3️⃣ 手动指定（你有 staging 的情况）

vite --mode staging
vite build --mode staging

---

四、你现在这个项目里实际生效的是哪个？

情况 1：你本地开发

npm run dev

👉 生效：.env.development

import.meta.env.VITE_APP_BASE_API
// 来自 .env.development

---

情况 2：你打生产包

npm run build

👉 生效：.env.production

---

情况 3：你要测试 / 预发布（staging）

vite build --mode staging

或 package.json：

"scripts": {
  "build:staging": "vite build --mode staging"
}

👉 生效：.env.staging

---

五、如何 100% 确认当前用的是哪个？

方法 1：看 MODE

console.log(import.meta.env.MODE)

---

方法 2：每个 env 写不同值（推荐）

# .env.development
VITE_APP_BASE_API=http://localhost:8080

# .env.production
VITE_APP_BASE_API=https://api.prod.com

# .env.staging
VITE_APP_BASE_API=https://api.staging.com

浏览器一看就知道。

---

六、⚠️ 非常容易踩的坑（重点）

❌ 1️⃣ 同时在 .env 里也写了

# .env
VITE_APP_BASE_API=http://xxx

你会以为不生效，其实是被 .env.[mode] 覆盖了。

---

❌ 2️⃣ 改了 .env 不重启

👉 Vite 必须重启

---

❌ 3️⃣ 生产环境用错 mode

vite build --mode development ❌

---

七、给你一套"企业级推荐用法"

package.json

{
  "scripts": {
    "dev": "vite",
    "build:dev": "vite build --mode development",
    "build:staging": "vite build --mode staging",
    "build:prod": "vite build --mode production"
  }
}

---

八、一句话总结（你一定要记住）

VITE_APP_BASE_API 用哪个？
👉 看你启动时的 mode
👉 mode 决定 .env.[mode]

如果你愿意，我可以下一步帮你：

• 对照你现在的 package.json 判断你真实在用哪个 env
• 或 帮你设计前后端统一的 dev / staging / prod 配置方案