如何从.env文件获取变量？JS项目API Key读取失败求助

问题核心 #

直接在HTML的<script>标签中编写的原生JS代码，不会被Create React App、Vite这类构建工具解析处理。这类工具只会在构建项目源码文件（如src下的JS/TS文件）时，替换process.env或import.meta.env对应的.env变量，而HTML中的原生script代码不在处理范围内，所以你之前尝试的方法都无效。

可行解决方案 #

方案1：利用构建工具的HTML模板变量注入 #

如果你的项目用了Vite或Create React App，可以直接在HTML文件中通过模板语法引用.env变量：

• Vite项目：
  1. .env文件中定义：VITE_API_KEY="abc123"
  2. 在index.html的script标签中直接使用模板变量：

  <script>
    const apiKey = "%VITE_API_KEY%";
    // 后续使用apiKey的逻辑
  </script>
  

• Create React App项目：
  1. .env文件中定义：REACT_APP_API_KEY="abc123"
  2. 在public/index.html的script标签中使用：

  <script>
    const apiKey = "%REACT_APP_API_KEY%";
    // 后续使用apiKey的逻辑
  </script>
  

方案2：将JS代码移入项目源码，由构建工具处理 #

把原本写在HTML script标签中的代码，放到项目的源码文件（如src/api.js）中，让构建工具处理变量替换后再引入：

1. 在src/api.js中编写：

// Vite环境
const apiKey = import.meta.env.VITE_API_KEY;
// 或CRA环境
// const apiKey = process.env.REACT_APP_API_KEY;

// 导出变量或直接编写业务逻辑
export function fetchData() {
  return fetch(`https://api.example.com?key=${apiKey}`);
}

2. 在HTML中引入构建后的JS文件（如Vite构建后的dist/assets/main.js，或CRA构建后的static/js/main.*.js）：

<script type="module" src="/src/api.js"></script>
<!-- 或引入构建后的产物文件 -->
<script src="/dist/assets/main.js"></script>

方案3：纯原生JS项目（无构建工具）的处理方式 #

如果是没有使用任何构建工具的纯原生JS项目，可以通过dotenv-cli加载.env变量并注入到全局：

1. 安装依赖：npm install dotenv-cli --save-dev
2. 创建一个简单的Node.js服务文件（如server.js），用于读取.env变量并渲染HTML：

const express = require('express');
const dotenv = require('dotenv');
const path = require('path');

dotenv.config();
const app = express();

app.get('/', (req, res) => {
  const apiKey = process.env.API_KEY;
  // 渲染HTML时注入变量
  res.send(`
    <html>
      <body>
        <script>
          const apiKey = "${apiKey}";
          // 业务逻辑
        </script>
      </body>
    </html>
  `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

3. 在package.json中添加启动脚本：

"scripts": {
  "start": "dotenv-cli -- node server.js"
}

4. .env文件中定义：API_KEY="abc123"，然后运行npm start访问http://localhost:3000即可。

重要提醒 #

如果你的API密钥是敏感信息（如涉及付费服务、用户隐私的密钥），绝对不要在前端代码中直接暴露。正确的做法是将密钥放在后端服务中，前端调用后端接口，由后端负责使用密钥请求第三方服务。

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