如何在JavaScript中通过import方式使用dotenv？

问题根源 #

你混淆了Node.js和浏览器的模块加载逻辑：dotenv是专门给Node.js后端设计的工具，直接在浏览器环境运行会因为模块规则差异和安全限制出错，浏览器本身也无法直接读取本地的.env文件。

正确的Node.js环境使用步骤 #

1. 修正导入代码
   两种正确写法二选一：

   • 写法一：导入模块后手动调用配置

     import dotenv from 'dotenv';
     dotenv.config();
     

   • 写法二：直接加载配置（无需额外调用config）

     import 'dotenv/config';
     

   注意：这两种写法仅适用于Node.js环境，不能作为前端脚本引入HTML文件中。

2. 正确运行代码
   在终端执行命令启动Node.js程序，不要直接用浏览器打开文件：

   node index.mjs
   

之前报错的原因 #

• 第一个错误Failed to resolve module specifier "dotenv/config"：浏览器的ES模块要求必须使用相对/绝对路径（如./xxx），但Node.js支持直接通过包名导入模块。你是在浏览器环境下运行了本该在Node.js中执行的代码，因此触发该错误。
• 第二个错误404：你添加了绝对路径/dotenv/config，浏览器会去服务器根目录查找该文件，而这个文件实际不存在，所以返回404。

如果需要在浏览器中使用环境变量 #

浏览器无法直接读取本地.env文件，可通过以下两种方式实现：

• 用你已安装的Express搭建后端，后端通过dotenv读取.env变量，再通过接口将变量传递给前端；
• 使用Vite、Webpack这类构建工具，它们自带环境变量注入机制（比如Vite的import.meta.env），在构建阶段将.env变量打包进前端代码。

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