vue中.env文件是什么，在vue2和vue3中的区别

在 Vue 项目中，.env 文件用于管理不同环境（如开发、生产）的配置变量。通过这些文件，开发者可以实现环境隔离和配置与代码分离，避免将 API 地址、调试开关等硬编码到源码中。

一、差异对比表

功能点	Vue2 (Vue CLI)	Vue3 (Vite)
环境变量前缀	VUE_APP_	VITE_
访问方式	process.env.VUE_APP_X	import.meta.env.VITE_X
模式判断	process.env.NODE_ENV, process.env.MODE	import.meta.env.MODE, .DEV, .PROD
类型支持	需额外配置	推荐 src/env.d.ts 声明
构建工具	Webpack + Vue CLI	Vite (默认)
自定义模式	支持 --mode xxx	支持 --mode xxx

二、不同 .env 文件的区别与作用

Vue 项目支持多种命名的 .env 文件，它们根据 运行模式 (mode) 和 优先级 被加载。以下是常见的几种文件及其用途：

文件名	加载条件	是否需要提交到Git	用途说明
.env	所有环境都加载	✅ 是	全局默认配置，所有环境共用的基础变量
.env.local	所有环境都加载	❌ 否	本地覆盖配置（不应提交），用于个人开发环境定制
.env.[mode]（如 .env.development, .env.production）	只有匹配 mode 时才加载	✅ 是	特定环境的配置（如 dev 环境 API 地址）
.env.[mode].local（如 .env.development.local）	匹配 mode 且本地存在时加载	❌ 否	特定环境的本地敏感配置（如本地测试密钥）

📌 加载优先级（后加载的会覆盖前面同名变量）
.env → .env.local → .env.[mode] → .env.[mode].local

• 开发时 (npm run dev) → 加载 .env → 再加载 .env.development → 最后 .env.development.local
• 构建生产包 (npm run build) → 加载 .env → 再加载 .env.production → 最后 .env.production.local

三、环境变量前缀规则（Vite/Vue CLI 不监听 .env 文件变化，改完必须重启项目）

• Vite (主流于 Vue3)

  必须以 VITE_ 开头才能通过 import.meta.env 访问 VITE_API_URL=http://localhost:3000

  # .env.development 文件
  VITE_API_URL=https://dev.api.example.com
  VITE_DEBUG=true# .env.production 文件
  VITE_API_URL=https://api.example.com
  VITE_DEBUG=false
  

• Vue CLI (常用于 Vue2)

  必须以 VUE_APP_ 开头才能暴露给客户端 VUE_APP_API_URL=http://localhost:8080

  # .env.development 文件
  VUE_APP_API_URL=https://dev.api.example.com
  VUE_APP_DEBUG=true# .env.production 文件
  VUE_APP_API_URL=https://api.example.com
  VUE_APP_DEBUG=false
  

四、如何使用环境变量？

• Vue3 + Vite

  • 在 vite.config.js 中使用

    import { defineConfig } from 'vite'export default defineConfig({base: import.meta.env.VITE_APP_ROUTER_BASE, // 设置公共路径server: {port: Number(import.meta.env.VITE_PORT)   // 注意类型转换}
    })
    

  • 在代码中读取

    // main.js 或任何组件中
    console.log(import.meta.env.VITE_API_URL);     // 输出 API 地址
    console.log(import.meta.env.MODE);             // 当前模式，如 'development'
    console.log(import.meta.env.DEV);              // 是否是开发环境 (true/false)
    console.log(import.meta.env.PROD);             // 是否是生产环境 (true/false)
    

  • 注意：.env 中的所有值都是字符串类型，需要手动转为布尔或数字：

    const isDebug = import.meta.env.VITE_DEBUG === 'true';
    const port = Number(import.meta.env.VITE_PORT);
    

• Vue CLI + Webpack

  • 在 vite.config.js 中使用

    const { VUE_APP_API_URL, VUE_APP_PORT } = process.env;module.exports = {devServer: {port: parseInt(VUE_APP_PORT, 10),proxy: {'/api': {target: VUE_APP_API_URL,changeOrigin: true,},},},
    };
    

  • 在代码中读取

    // main.js 或任何组件中
    console.log(process.env.VUE_APP_API_URL); // 输出: https://dev.api.example.com
    console.log(process.env.VUE_APP_DEBUG);   // 输出: true (字符串)
    console.log(process.env.NODE_ENV);        // 输出: development 或 production
    

  • 注意：.env 中的所有值都是字符串类型，需要手动转为布尔或数字：

    const isDebug = process.env.VUE_APP_DEBUG === 'true';
    const port = Number(process.env.VUE_APP_PORT);
    

五、注意事项

• 不要存储敏感信息

  • 所有以 VITE_ 或 VUE_APP_ 开头的变量都会被打包进前端代码，用户可通过浏览器查看。
  • 不要放 API 密钥、数据库密码、私钥等，敏感信息应由后端服务管理。

• .gitignore 中排除本地文件

  .env.local
  .env.*.local
  

六、结论：

• 多个 .env 文件是为了实现 多环境差异化配置。
• Vue3 使用 Vite 后，语法从 process.env 变为 import.meta.env，前缀也变为 VITE_。
• 核心思想不变：配置分离、安全暴露、便于维护。