vue 3 项目中配置开发环境变量需使用 vite 的 .env.development 文件，变量必须以 vite_ 开头，启动命令应显式指定 --mode development，并通过 import.meta.env 安全读取，修改后需重启服务。
Vue 3 项目中配置开发环境变量，核心是用好 Vite 的 .env 文件机制和 import.meta.env 接口。它不依赖额外插件，开箱即用，但必须遵守命名与加载规则，否则变量不会生效。
开发环境专用文件：.env.development
在项目根目录新建 .env.development 文件（注意不是 .env 或 .env.local），这是开发模式下优先加载的配置文件：
- 所有变量必须以 VITE_ 开头，例如
VITE_API_BASE_URL=http://localhost:3000/api - 可定义开发专属配置，如调试开关、Mock开关、本地代理路径等
- 该文件默认被
.gitignore忽略，不提交到代码仓库，避免污染团队环境
启动命令要指定 mode
Vite 默认运行在 development 模式，但需确保启动时明确匹配文件名。检查 package.json 中的脚本：
-
"dev": "vite --mode development"—— 显式声明 mode，触发加载.env.development - 如果只写
"dev": "vite"，Vite 仍会加载该文件，但显式声明更清晰、不易出错 - 不要用
NODE_ENV=development vite，Vite 不识别NODE_ENV，只认--mode
在代码里安全读取变量
开发环境中，通过 import.meta.env 直接访问，无需额外导入或初始化：
- 正确写法：
const api = import.meta.env.VITE_API_BASE_URL - 不能动态拼接 key：
import.meta.env[`${prefix}_API_URL`]无效，构建时无法静态替换 - 建议封装成常量或配置对象，在
src/config/env.ts统一导出，便于类型提示和集中管理
验证是否生效的小技巧
快速确认环境变量已正确加载：
- 在
main.ts或任意组件中打印：console.log(import.meta.env)，查看输出中是否有你的VITE_*变量 - 启动 dev server 后，打开浏览器控制台，检查
import.meta.env.MODE是否为"development" - 修改
.env.development后需重启 dev server，热更新不监听 .env 文件变更
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
