xmlns="http://www.w3.org/2000/svg"
style="display:
none;">
你是否还在为开发环境和生产环境的
API
地址切换而反复修改代码？或者被“不小心提交了敏感信息”的惊吓吓得睡不着觉？作为混迹前端圈十年的老司机，我曾被这些问题折磨得头发掉光。
直到我深入研究了
import.meta.env——这个Vite
项目中的“隐形助手”，才真正体会到什么叫“配置自由”。
今天，我就带你拆解它的原理、用法和避坑指南，让你从此告别配置地狱。
/>
一、import.meta.env是什么？为什么它这么香？
在现代前端构建工具中（Vite、Rollup
等），import.meta.env是一个在构建时自动注入的只读对象，它把环境变量“安全地”暴露给你的代码。
/>核心价值：
API
密钥）不会被硬编码进源码，也不会被提交到
Git
为什么叫“meta”？ /> API（用于模块元数据），Vite/Rollup 利用它在构建阶段注入变量，不是运行时动态获取。 这意味着在浏览器中打印 💡真实案例： 'https://dev.api'，现在只需 import.meta.env.VITE_API_URL，简洁又安全。 文件开始import.meta是浏览器原生import.meta.env会看到字符串（如"development"），而不是对象。API
constAPI
/>
二、常见属性
1.环境变量命名规则（Vite
专属，Rollup
需额外配置）
- Vite：变量必须以
VITE_开头（如VITE_API_URL），否则会被忽略（安全设计！） - Rollup：原生不支持，需用插件（如
@rollup/plugin-inject或vite-plugin-environment）注入。
2.配置文件示例
在项目根目录创建.env文件（Vite
会自动识别）：
#.env.development
VITE_API_URL="https://dev.api.com"
App"
VITE_API_URL="https://prod.api.com"
App"
3.在代码中使用
//main.js
console.log(import.meta.env.MODE);//"production"
console.log(import.meta.env.VITE_API_URL);//Vue/React
组件中
constApp=()=>{return<h1>{import.meta.env.VITE_APP_TITLE}</h1>;};⚠️关键注意：
- 变量名必须全大写（如
VITE_API_URL），Vite会自动转为
import.meta.env.VITE_API_URL- 未以
VITE_开头的变量（如API_URL）不会注入！Vite会直接忽略，避免误用。
/>三、Vite
Rollup：环境变量的“微妙差异”
| 场景 | Vite (需插件) | |
|---|---|---|
| 环境变量注入 | 无需配置，直接可用 | 需安装插件（如rollup-plugin-inject-env） |
| 变量前缀要求 | 必须以VITE_开头 | 无强制要求（但建议遵循Vite规范） |
| 常见插件 | 无 | @rollup/plugin-inject或vite-plugin-environment |
Rollup
配置示例（rollup.config.js）：
importinjectEnvfrom'@rollup/plugin-inject-env';exportdefault{plugins:[injectEnv({//指定环境变量文件
env:{VITE_API_URL:'https://rollup-api.com'}})]};💡为什么
Vite
内置了环境变量处理逻辑（基于
@vitejs/plugin-vue），而Rollup
是底层工具，需手动扩展。
强烈建议：用
Vite
配置。
的人踩过的雷
敏感信息泄露
- ❌
错误：在
.env中写API_KEY=abc123（未以VITE_开头） - ✅
正确：
VITE_API_KEY=abc123，Vite会自动过滤非
VITE_变量。
- ❌
变量未生效
- 检查：是否重启了开发服务器？（Vite
需热更新）
- 检查：变量名是否漏了
VITE_前缀。
- 检查：是否重启了开发服务器？（Vite
TypeScript
报错，添加类型声明：
//env.d.ts
declaremodule'vite'{interfaceImportMetaEnv{VITE_API_URL:string;VITE_APP_TITLE:string;}}生产环境未替换
- 确保
build时使用vite，否则会用build
production
development的变量。
- 确保
/>
五、进阶技巧：让环境变量更智能
动态环境切换
/>通过
mode参数在命令行指定环境：vitebuild
.env.staging
结合
CI/CD
中设置环境变量：
jobs:build:env:VITE_API_URL:${{secrets.PROD_API_URL}}#GitHub
获取
steps:-run:vitebuild
为
Rollup
Rollup，可以写个简单插件自动注入
VITE_变量：//vite-env-plugin.js
exportdefaultfunctionviteEnv(){return{name:'vite-env',renderChunk(code){returncode.replace(/import\.meta\.env\./g,'import.meta.env.');}};}
/>
结语：配置自由，从import.meta.env开始
import.meta.env不是“新特性”，而是现代前端工程化的基础实践。
它用最小的代码代价，解决了环境配置的痛点——安全、简洁、可维护。
记住： 变量名必须以 用 Vite，避免额外配置/>✅
VITE_开头（Vite项目）
.env文件管理，别写死在代码里/>✅
