vite vue 环境变量 .env 文件

.env 环境配置文件

一 .env 文件的基本规则

1. 命名规则 ：
   • .env - 所有环境都会加载
   • .env.local - 所有环境都会加载，但会被git忽略
   • .env.[mode] - 只在指定模式下加载 (如 .env.production)
   • .env.[mode].local - 只在指定模式下加载，且被git忽略
2. 优先级 ：
   • 指定模式的.env文件 > 通用.env文件
   • 本地(.local)文件 > 非本地文件

二、如何判断当前环境

1. 通过命令行参数决定环境

在package.json中，通过--mode参数指定环境：

{
  "scripts": {
    "dev": "vite --mode development",
    "build:web": "vite build --mode production",
    "build:electron": "vite build --mode electron"
  }
}

2. 获取环境变量

在代码中可以通过import.meta.env访问环境变量：

// 判断当前环境
if (import.meta.env.MODE === 'development') {
  console.log('开发环境')
} else if (import.meta.env.MODE === 'production') {
  console.log('生产环境')
}
// 访问自定义环境变量
const apiUrl = import.meta.env.VITE_APP_BASE_API

3. 自动加载机制

Vite会根据当前运行模式自动加载对应的.env文件：

• vite 或 vite dev → 默认使用 .env.development
• vite build → 默认使用 .env.production
• 使用 --mode 指定时 → 使用对应的 .env.[mode]

三、在vite.config.js中使用

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  // 1 'mode'=加载环境变量，'process.cwd()'=表示项目根目录
  const env = loadEnv(mode, process.cwd())
  
  // 2 现在可以通过env访问变量
  console.log(env.VITE_APP_BASE_API)
  
  return {
    // 配置...
  }
})

四、在项目中使用

所有以VITE_开头的变量会被注入到import.meta.env中：

// 1 直接访问
const baseUrl = import.meta.env.VITE_APP_BASE_API

// 2 条件判断
if (import.meta.env.VITE_BUILD_TARGET === 'electron') {
  // Electron特有逻辑
}

五 项目中如何配置

1 .env 文件覆盖机制

对于 vite build --mode production.web 命令：

1. .env - 所有环境共享的基础配置
2. .env.production - 生产环境通用配置
3. .env.production.web - Web生产环境特有配置

📌 覆盖规则：后加载的文件会覆盖前面文件的同名变量。

2 实际加载示例

1. .env (基础)

VITE_APP_TITLE=OK Factura
VITE_API_TIMEOUT=5000

2. .env.production (生产通用)

VITE_APP_ENV=production
VITE_API_TIMEOUT=8000  # 覆盖.env中的值

3. .env.production.web (Web生产)

VITE_BUILD_TARGET=web
VITE_APP_BASE_API=/prod-api
VITE_API_TIMEOUT=10000  # 覆盖前两个文件的值

▶️ 最终生效的环境变量：

{
  VITE_APP_TITLE: 'OK Factura',       // 来自.env
  VITE_APP_ENV: 'production',         // 来自.env.production
  VITE_BUILD_TARGET: 'web',           // 来自.env.production.web
  VITE_APP_BASE_API: '/prod-api',     // 来自.env.production.web
  VITE_API_TIMEOUT: '10000'           // 最终被.env.production.web覆盖
}