VueJS+VITE（2024最新版）项目API密钥在DevTools泄露求助解决

核心原因 #

Vite框架中，所有以VITE_为前缀的环境变量都会被自动注入到客户端代码中，因此会在浏览器DevTools里被直接查看到。如果你的API密钥是直接在前端代码中调用第三方API时使用，那只要前端能拿到密钥，就必然会暴露——因为前端代码本身是完全公开的资源。

正确解决方案 #

1. 敏感密钥必须通过后端转发 #

• 敏感API密钥绝对不能让前端直接持有，必须部署在你的后端服务（如Node.js、Python Flask/Django等）中。
• 前端仅发送请求到自己的后端接口，由后端携带密钥去调用第三方API，再将结果返回给前端。全程前端不会接触到密钥，从根源避免暴露。

2. 调整环境变量的前缀规则 #

• 非敏感的客户端配置变量，保留VITE_前缀，可正常在前端代码中访问（如import.meta.env.VITE_APP_TITLE）。
• 敏感密钥不要添加VITE_前缀，这类变量不会被Vite注入到客户端代码中，仅能在Vite配置文件（vite.config.js）或服务端脚本中读取使用。

3. 实操示例 #

假设你要调用需密钥验证的第三方天气API：

• 后端创建接口/api/get-weather，在后端代码中读取不带VITE_前缀的环境变量WEATHER_API_KEY。
• 前端调用/api/get-weather接口，后端携带密钥请求第三方API，再将天气数据返回给前端。

针对你当前情况的修复步骤 #

1. 打开你的.env文件，将敏感密钥的VITE_前缀移除（比如从VITE_API_KEY=xxx改为API_KEY=xxx）。
2. 删除前端代码中直接引用该密钥的逻辑，所有需要使用密钥的请求改为调用自己的后端接口。
3. 检查.gitignore文件，确保.env已被加入忽略列表，避免密钥意外提交到代码仓库。

内容的提问来源于stack exchange，提问作者Two Knight Rabbits