如何让.env文件在Node.js/React项目中正常生效？

1. 工具选择：dotenv-webpack是正确选项 #

浏览器环境无法直接使用dotenv——它是Node.js端工具，依赖Node的文件系统和process对象，浏览器没有这些能力。所以选dotenv-webpack是对的，它会在webpack打包阶段把环境变量注入到浏览器可访问的process.env中。

2. 解决.env值显示undefined的问题 #

检查.env文件规则 #

• 变量名必须以REACT_APP_开头（这是React项目的通用约定，webpack会自动识别该前缀，避免意外暴露非业务变量），示例：

  REACT_APP_WEATHER_API_KEY=your_real_key_here
  

• 变量值不要加引号，比如REACT_APP_KEY="xxx"会导致最终值带引号，直接写REACT_APP_KEY=xxx即可。
• 确保.env文件放在项目根目录，和webpack.config.js同级。

完善webpack.config.js配置 #

你需要在webpack配置中显式引入并启用Dotenv插件，仅保留fallback配置不够：

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

module.exports = {
  // 其他原有配置...
  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "crypto": require.resolve("crypto-browserify"),
    }
  },
  plugins: [
    new Dotenv() // 新增这一行，加载根目录的.env文件
  ]
};

如果需要区分环境（比如生产环境用.env.production），可以指定文件路径：

new Dotenv({
  path: './.env.production' // 对应环境的配置文件
})

组件中正确访问变量 #

在App.js里必须使用带前缀的变量名：

console.log(process.env.REACT_APP_WEATHER_API_KEY); // 不要写process.env.WEATHER_API_KEY

3. 解决GitHub Pages部署后.env被删除的问题 #

GitHub Pages只会部署打包后的build目录内容，.env文件从不会也不应该被部署——它是本地开发/打包时的配置文件，敏感信息绝不能提交到仓库。dotenv-webpack的作用就是在打包时把变量值注入到bundle.js中，部署后的代码里已经包含了变量值，不需要.env文件存在。

如果部署后变量仍为undefined，检查：

• 打包命令（如npm run build）执行时，webpack是否正确加载了Dotenv插件
• 生产环境是否使用了对应环境的.env文件（比如.env.production）

4. 为什么dotenv会导致编译失败？ #

dotenv依赖Node.js的fs模块读取本地文件，浏览器环境没有这个模块，所以在React组件里直接调用require('dotenv').config()会触发编译错误，这是正常的——它本来就不是给浏览器环境用的。

额外注意事项 #

• 把.env文件添加到.gitignore中，避免敏感信息提交到GitHub
• 如果你用的是Create React App官方脚手架，其实不需要手动配置dotenv-webpack，它自带对REACT_APP_前缀变量的支持，直接在.env里写变量即可自动注入。

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