Vite
Vite 环境变量与模式
学会在 Vite 项目中使用 .env 文件和 import.meta.env，区分开发、测试和生产环境。
🎯 引言
学会这篇文章，你能用 .env 文件管理不同环境的配置，比如接口地址、应用标题，还能在代码里通过 import.meta.env 读取它们。这是实际项目中非常常见的需求。
🧱 为什么需要环境变量
同一个项目在不同环境下经常需要不同的配置：
- 开发环境调用本地接口
http://localhost:3000。 - 测试环境调用测试服务器
https://api-test.example.com。 - 生产环境调用正式接口
https://api.example.com。
如果把这些地址硬编码在代码里，每次切换环境都要手动改代码，很容易出错。环境变量就是用来解决这个问题的。
✨ .env 文件
Vite 会自动读取项目根目录下的 .env 文件，并根据当前模式加载对应文件：
| 文件名 | 加载时机 |
|---|---|
.env | 所有模式都会加载 |
.env.local | 所有模式都会加载，但不会被提交到 Git |
.env.development | 开发模式（vite / vite dev） |
.env.production | 生产模式（vite build） |
.env.[mode] | 自定义模式 |
.env.local 通常放本地秘密信息，记得在 .gitignore 里忽略它。🛠 定义环境变量
只有以 VITE_ 开头的变量才会暴露给客户端代码。例如：
.env.development
VITE_API_URL=http://localhost:3000
VITE_API_PREFIX=/api
不以 VITE_ 开头的变量不会被前端读取，只能用于 Vite 配置或脚本中：
.env
PRIVATE_KEY=abc123
不要把密钥、密码等敏感信息用
VITE_ 前缀暴露出去，否则会被打包到前端代码里，所有人都能看到。🛠 在代码中读取
Vite 通过 import.meta.env 提供环境变量：
src/api/request.js
const baseURL = import.meta.env.VITE_API_URL;
console.log(baseURL); // http://localhost:3000
你也可以在模板里直接用：
App.vue
<template>
<p>接口地址：{{ import.meta.env.VITE_API_URL }}</p>
</template>
import.meta.env 是 Vite 注入的对象，里面有 MODE、BASE_URL、DEV、PROD 等内置变量。⚙️ 自定义模式
执行命令时可以指定模式：
vite build --mode staging
Vite 会加载 .env.staging，并把 import.meta.env.MODE 设为 staging。
在 vite.config.js 里也能拿到模式：
vite.config.js
import { defineConfig } from 'vite';
export default defineConfig(({ mode }) => {
console.log('当前模式：', mode);
return {
base: mode === 'production' ? '/app/' : '/',
};
});
defineConfig 可以接收一个函数，函数的参数包含 mode 和 command，方便你根据环境返回不同配置。🧾 小节总结
- 用
.env文件管理不同环境的配置，避免把地址等硬编码到业务代码中。 - 只有
VITE_开头的变量才会暴露给前端代码。 - 在代码中通过
import.meta.env.变量名读取环境变量。 - 可以通过
--mode自定义模式，并在vite.config.js中根据mode返回不同配置。
❓ 知识问答
Q1：普通变量（不以 VITE_ 开头）有什么用？
可以在 vite.config.js、Node 脚本或后端服务里读取，但不会被注入到浏览器端。
Q2：.env.local 和 .env.development 会同时加载吗？
会。.env.local 优先级更高，如果变量名冲突，.env.local 里的值会覆盖 .env 里的值。
Q3：生产环境变量写在哪个文件？
写在 .env.production，执行 vite build 时会自动加载。
🧪 小练习
为你的项目添加环境变量：
- 创建
.env.development和.env.production。 - 分别写入不同的
VITE_API_URL。 - 在
src/App.vue中读取并显示接口地址。
src/App.vue
<template>
<p>当前接口地址：{{ apiUrl }}</p>
</template>
<script setup>
// 请在这里读取 VITE_API_URL
const apiUrl = '';
</script>
🎉 恭喜你掌握了 Vite 环境变量的使用！下一篇我们学习依赖预构建。