刘文柱

# vite环境变量

# 基本规则

Vite 使用 .env 系列文件管理环境变量，并且有明确优先级。

常见文件：

  • .env（所有环境生效）
  • .env.development（开发环境）
  • .env.production（生产环境）
  • .env.local（本地私有，不建议提交）

# 命名约束

只有以 VITE_ 开头的变量，才会暴露给前端代码。

例如：

VITE_API_BASE=/api
APP_SECRET=xxx
1
2

前端能拿到 VITE_API_BASE，拿不到 APP_SECRET。

# 在代码中使用

console.log(import.meta.env.VITE_API_BASE);
console.log(import.meta.env.MODE);
console.log(import.meta.env.DEV);
1
2
3

# 模式（mode）

运行时可以指定模式：

vite --mode test
vite build --mode production
1
2

对应会读取 .env.test 或 .env.production。

# 在配置文件中读取

vite.config.js

import { defineConfig, loadEnv } from "vite";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return defineConfig({
    server: {
      port: Number(env.VITE_PORT || 5173),
    },
  });
};
1
2
3
4
5
6
7
8
9
10

# 安全注意

不要把密钥、数据库密码放在前端环境变量中。
VITE_ 变量会进入打包产物，用户可见。

# 小结

Vite 环境变量机制很简单：
按文件分环境 + 按前缀控制暴露范围，这两条掌握住就够用了。

← vite构建优化 →