如何在React项目useEffect中获取.env环境变量的值

解决方案步骤 #

直接按以下顺序排查配置，全部满足后即可正常读取变量：

1. 确认.env.local文件位置正确
   必须放在项目根目录（和package.json文件同级），不能放在src、public等子目录下。

2. 重启开发服务
   Create React App（CRA）的环境变量是构建阶段注入的，修改.env类文件后必须停止当前运行的npm start/yarn start命令，重新启动开发服务器，新的环境变量才会生效。

3. 确认框架的变量前缀规则

• 如果你用的是CRA脚手架：你当前的变量前缀REACT_APP_符合要求，无需修改
• 如果你用的是Vite脚手架：需要把变量前缀改为VITE_，即变量名为VITE_TEST，读取方式改为import.meta.env.VITE_TEST

4. 正常在useEffect中读取即可，示例代码如下：

import { useEffect } from 'react';

function DemoComponent() {
  useEffect(() => {
    // 配置正确的情况下这里可以直接拿到值
    const testEnv = process.env.REACT_APP_TEST;
    console.log('REACT_APP_TEST的值：', testEnv);
    // 后续你的业务逻辑
  }, []);

  return <div>测试组件</div>
}

特殊情况处理（自定义webpack配置的项目） #

如果是自己手动搭建的React项目，没有用CRA/Vite等脚手架，需要在webpack配置中新增DefinePlugin注入环境变量：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_TEST': JSON.stringify(process.env.REACT_APP_TEST)
      // 其他需要注入的环境变量也可以在这里加
    })
  ]
}

修改完配置后重启开发服务即可。

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