使用dotenv在script.js隐藏API密钥失败，配置后无法读取密钥

以下是针对你遇到的问题的排查步骤和解决方案：

1. 核心问题：dotenv 不适用于浏览器端代码 #

你的代码使用了 document.querySelector 等浏览器 API，说明这是前端代码。浏览器环境中不存在 process.env 对象，因此直接使用 dotenv 无法读取环境变量。

前端环境的解决方案： #

使用前端构建工具（如 Vite、Webpack、Parcel）注入环境变量：

• 以 Vite 为例：
  1. 在 .env 文件中定义变量时，前缀需为 VITE_，例如：VITE_API_KEY=2947****
  2. 在代码中通过 import.meta.env.VITE_API_KEY 访问该变量
• 以 Webpack 为例：
  1. 使用 webpack.DefinePlugin 插件将环境变量注入到代码中
  2. 或使用 dotenv-webpack 插件来加载 .env 文件

2. 若为 Node.js 后端环境，检查以下几点 #

如果你的代码是运行在 Node.js 环境中，按以下步骤排查：

• 确认 .env 文件位置：确保 .env 文件放在项目根目录（与 script.js 同级，或与你执行 node script.js 时的工作目录一致）。若不在同一目录，需指定路径：

  const path = require('path');
  require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
  

• 检查 .env 文件语法：
  • 变量名与值之间不能有空格：API_KEY=2947****（正确），API_KEY = 2947****（错误）
  • 值不要加引号：API_KEY=2947****（正确），API_KEY="2947****"（错误，引号会被当作值的一部分）
• 重启 Node 进程：修改 .env 文件后，必须重启 Node 服务才能加载新的变量
• 验证变量加载情况：在代码开头添加 console.log(process.env.API_KEY)，若输出 undefined，说明变量未成功加载
• 确认依赖安装：确保已执行 npm install dotenv，且 dotenv 在 package.json 的依赖列表中

3. 其他排查点 #

• 检查 .gitignore 是否正确排除了 .env 文件，避免密钥被提交到代码仓库
• 确认系统中没有同名的环境变量（如系统级的 API_KEY），否则会覆盖 .env 中的值

内容的提问来源于stack exchange，提问作者ashish