如何在HTML与JavaScript文件中使用.env文件？

纯静态HTML/JS页面没法直接读取.env文件——浏览器出于安全限制，不允许前端脚本直接访问本地文件。得借助前端构建工具（比如Vite、Parcel）或者后端服务来处理环境变量，下面是最适合前端场景的Vite方案：

1. 初始化项目并安装Vite #

打开终端，进入你的项目目录，执行以下命令：

npm create vite@latest . -- --template vanilla
npm install

（选vanilla模板是因为它适配纯HTML/JS的简单项目）

2. 调整.env文件格式 #

Vite要求前端可访问的环境变量必须带VITE_前缀，所以把你的.env文件改成：

VITE_GOOGLE_API_TOKEN=你的实际谷歌API令牌

文件放在项目根目录即可。

3. 用JavaScript读取环境变量并设置iframe地址 #

修改项目里的main.js（如果没有就新建），加入以下代码：

// 从环境变量中取令牌
const apiToken = import.meta.env.VITE_GOOGLE_API_TOKEN;
// 获取页面上的iframe元素
const mapIframe = document.getElementById('maps');
// 动态拼接src地址
mapIframe.src = `https://www.google.com/maps/embed/v1/place?key=${apiToken}&q=United+States`;

4. 修改HTML代码 #

把原来的iframe标签的src设为空，让JS来动态赋值，同时确保引入main.js：

<iframe id="maps" src="" width="600" height="450" style="border:0" allowfullscreen="" loading="lazy"></iframe>
<script type="module" src="/main.js"></script>

5. 启动项目 #

在终端运行：

npm run dev

项目启动后，Vite会自动把环境变量注入到代码里，iframe就能加载带有效令牌的谷歌地图了。

备选方案：用Node.js后端渲染 #

如果不想用前端构建工具，也可以用Node.js做后端，通过后端读取.env并渲染HTML：

1. 安装依赖：

npm install dotenv express

2. 新建server.js：

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

app.get('/', (req, res) => {
  const token = process.env.GOOGLE_API_TOKEN;
  res.send(`
    <iframe id="maps" src="https://www.google.com/maps/embed/v1/place?key=${token}&q=United+States" width="600" height="450" style="border:0" allowfullscreen="" loading="lazy"></iframe>
  `);
});

app.listen(3000, () => console.log('服务运行在3000端口'));

3. 启动服务：node server.js，访问http://localhost:3000即可看到效果。

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