使用Browserify与dotenv时API Key返回undefined的问题求助

为什么之前的方法失效？ #

• dotenv 是 Node.js 专属工具，浏览器环境不存在 process.env 全局对象，直接调用会报错。
• Browserify 未配置环境变量注入逻辑时，无法将 .env 变量转换为浏览器可识别的代码，因此返回 undefined。

以下是无需 Webpack、支持直接打开本地 HTML 的解决办法：

方法1：手动创建前端环境变量文件 #

这是最简洁的本地解决方案：

1. 在项目根目录新建 env.js 文件，将 .env 中的密钥暴露为全局变量：

   // env.js
   window.env = {
     API_KEY: "123ABC" // 直接复制.env里的密钥值
   };
   

2. 在 HTML 中先引入 env.js，再引入业务脚本：

   <script src="./env.js"></script>
   <script src="./index.js"></script>
   

3. 业务代码中直接调用：

   const apiKey = window.env.API_KEY;
   console.log(apiKey); // 输出123ABC
   

⚠️ 注意：将 env.js 添加到 .gitignore，避免密钥提交到代码仓库。

方法2：用Vite轻量处理环境变量（支持开发/静态打包） #

Vite 比 Webpack 更轻量，原生支持前端环境变量：

1. 安装 Vite：

   npm install vite --save-dev
   

2. 根目录新建 .env.local 文件，变量需以 VITE_ 为前缀：

   VITE_API_KEY="123ABC"
   

3. 业务代码中通过 import.meta.env 获取变量：

   const apiKey = import.meta.env.VITE_API_KEY;
   

4. 开发时启动本地服务器：

   npx vite
   

   访问 http://localhost:5173 即可正常读取密钥；若需要静态文件，运行 npx vite build，打包后的 dist 文件夹可直接打开。

方法3：用Shell脚本注入密钥到HTML #

适合需要自动替换密钥的场景：

1. 新建 index.html.template 作为模板，预留变量占位符：

   <!-- index.html.template -->
   <script>
     window.API_KEY = "{{API_KEY}}";
   </script>
   <script src="./index.js"></script>
   

2. 编写 inject-env.sh 脚本，读取 .env 并替换占位符：

   #!/bin/bash
   # 从.env中提取API_KEY，去除引号
   API_KEY=$(grep API_KEY .env | cut -d '=' -f2 | tr -d '"')
   # 替换模板中的占位符，生成最终index.html
   sed "s/{{API_KEY}}/$API_KEY/" index.html.template > index.html
   

3. 运行脚本生成可直接打开的 index.html：

   chmod +x inject-env.sh && ./inject-env.sh
   

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