React项目环境变量使用问题：dotenv配置后变量未定义且报错

问题1：process.env.API_KEY未定义 #

先排查这几点：

• 确认.env文件放在项目根目录（和package.json同一文件夹下），别放错位置
• 检查.env里的写法，必须是API_KEY=你的密钥，别加引号、空格，比如别写成API_KEY = "abc123"
• 确保require('dotenv').config()写在所有使用process.env的代码之前，比如文件第一行就加载

问题2：找不到'path'模块报错 #

这个是因为你在前端项目（比如用webpack、Vite搭建的）里用了原生dotenv，而path是Node.js专属模块，浏览器环境没有。分情况解决：

如果是webpack项目 #

1. 卸载原生dotenv，安装dotenv-webpack：

npm uninstall dotenv
npm install dotenv-webpack --save-dev

2. 修改webpack.config.js，添加插件配置：

const Dotenv = require('dotenv-webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new Dotenv()
  ]
};

3. 之后直接在代码里用process.env.API_KEY就行，不用再写require('dotenv').config()

如果是Vite项目 #

Vite自带环境变量处理，不用装dotenv：

1. 把.env文件改成.env.local（或者保持.env，但要注意Vite规则：变量必须以VITE_开头，比如VITE_API_KEY=你的密钥）
2. 代码里直接用import.meta.env.VITE_API_KEY访问，不用额外配置

如果是Node.js后端项目 #

出现这个报错可能是webpack配置把Node核心模块排除了，检查webpack配置里的node选项，确保path没被禁用：

module.exports = {
  // 其他配置...
  node: {
    path: true
  }
};

或者直接用Node原生运行（不用webpack打包），原生Node环境支持path模块，不会报错

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