vue2 和 vue3 获取 .env 变量的方式

在 Vue 2 和 Vue 3 中，获取 .env 文件中定义的环境变量的方式 本质上是一样的，因为它们都依赖于 Vite（Vue 3 默认）或 Webpack（Vue 2 默认 + Vue CLI） 的构建工具对环境变量的处理机制。但两者的底层构建工具不同，导致 配置方式和变量命名规则略有差异。

✅ 共同前提：.env 文件命名规范

无论是 Vue 2（通过 Vue CLI）还是 Vue 3（通过 Vite 或 Vue CLI），都要求：

• 只有以 VUE_APP_（Vue CLI）或 VITE_（Vite）开头的变量才会被嵌入到客户端代码中。
• 这是为了安全：防止意外暴露敏感信息（如数据库密码）到前端。

🧩 1. Vue 2（使用 Vue CLI + Webpack）

✅ 支持的 .env 文件

.env                # 所有环境加载
.env.local          # 所有环境加载，但会被 git 忽略
.env.development    # 开发环境
.env.production     # 生产环境

✅ 变量命名规则

• 必须以 VUE_APP_ 开头，例如：

  VUE_APP_API_BASE_URL=https://api.example.com
  VUE_APP_VERSION=1.2.0
  

✅ 在代码中使用

// 任意 .js 或 .vue 文件中
console.log(process.env.VUE_APP_API_BASE_URL);

⚠️ 注意：process.env 是 Webpack 注入的，不是 Node.js 原生的。普通变量（如 API_KEY=xxx）不会被包含！

🧩 2. Vue 3

Vue 3 有两种主流开发方式，处理方式不同：

情况 A：使用 Vite（现代推荐方式）

✅ 支持的 .env 文件

.env
.env.local
.env.development
.env.production

✅ 变量命名规则

• 必须以 VITE_ 开头，例如：

  VITE_API_BASE_URL=https://api.example.com
  VITE_APP_TITLE=My App
  

✅ 在代码中使用

// 在 .vue 或 .js 文件中
console.log(import.meta.env.VITE_API_BASE_URL);

🔍 注意：Vite 使用 import.meta.env 而不是 process.env。

📌 特别说明：

• import.meta.env.MODE 对应当前模式（如 'development' 或 'production'）。
• 非 VITE_ 开头的变量不会暴露给客户端代码（可在服务端插件中使用，但前端拿不到）。

情况 B：使用 Vue CLI（Webpack）（兼容旧项目）

如果你用 Vue CLI 创建 Vue 3 项目（不推荐新项目这么做），那么行为和 Vue 2 完全一致：

• 变量必须以 VUE_APP_ 开头；
• 使用 process.env.VUE_APP_xxx 访问。

🆚 对比总结表

💡 示例对比

Vue 2 / Vue 3 (Vue CLI)

// .env
VUE_APP_API_URL=https://dev.api.com

// 组件中
export default {
  mounted() {
    console.log(process.env.VUE_APP_API_URL);
  }
}

Vue 3 (Vite)

// .env
VITE_API_URL=https://dev.api.com

// 组件中
export default {
  mounted() {
    console.log(import.meta.env.VITE_API_URL);
  }
}

🔒 安全提醒

• 永远不要在 .env 中存放敏感信息（如密码、私钥），因为这些变量会被打包进前端代码！
• 如果需要后端密钥，请通过后端 API 代理访问。

如有你的项目是用 Vite 还是 Vue CLI 创建的，可以告诉我，我可以给出更具体的配置建议！