如何解决Uncaught SyntaxError错误及从.env文件导入API_KEY？

你遇到的Uncaught SyntaxError: ambiguous indirect export: default报错，本质是dotenv是为Node.js环境设计的工具，浏览器环境下直接导入会出现模块导出不兼容的问题，而且浏览器里根本没有process.env这个Node.js专属对象，所以原代码逻辑从根上就不适用浏览器场景。

下面给你两种可行的解决方向，根据你的项目类型选择：

方案1：用前端构建工具（推荐） #

如果你的项目基于Vite、Webpack、Parcel这类构建工具，它们原生支持环境变量处理，完全不需要手动引入dotenv：

1. 在根目录的.env文件里，给变量加对应构建工具要求的前缀（比如Vite要求前缀VITE_）：

VITE_API_KEY=你的API密钥内容

2. 在app/js/app.js里直接调用变量：

const apiKey = import.meta.env.VITE_API_KEY;
console.log(apiKey);

构建工具会自动把环境变量注入到代码中，生产环境还会做安全处理（注意：敏感密钥不要提交到公开代码仓库）。

方案2：纯静态页面（无构建工具） #

如果是纯静态HTML项目，无法直接使用dotenv，换以下两种方式：

• 方式A：用独立配置文件

  1. 在项目根目录新建config.js文件：

  export const API_KEY = '你的API密钥内容';
  

  2. 在app/js/app.js里导入使用：

  import { API_KEY } from '../../config.js';
  console.log(API_KEY);
  

  注意：这种方式密钥会直接暴露在前端代码中，仅适合测试环境或非敏感场景，生产环境敏感密钥必须放在服务器端。

• 方式B：服务器端注入变量
  把API密钥存在服务器端，通过后端渲染HTML时注入全局变量，比如在HTML里添加：

  <script>
    window.API_KEY = '你的API密钥内容';
  </script>
  

  然后在app/js/app.js里直接调用：

  const apiKey = window.API_KEY;
  console.log(apiKey);
  

原代码问题复盘 #

你直接导入../../node_modules/dotenv/lib/main.js的错误点：

1. dotenv的模块导出遵循Node.js规范，浏览器不识别这种导出方式，导致导出歧义报错；
2. 浏览器环境没有process.env对象，就算导入成功也无法读取变量。

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