React中环境变量显示undefined问题求助

首先，你犯了一个最容易忽略的错误：环境变量文件名不对，你创建的是process.env文件，但Create React App（CRA）默认只会识别根目录下的.env文件（注意文件名前的英文句号）。

快速修复步骤： #

• 把根目录的process.env文件重命名为.env，内容保持不变：

  REACT_APP_SERVICE_ID=key
  REACT_APP_TEMPLATE_ID=key_2
  REACT_APP_API_KEY=key_3
  

• 完全关闭当前的开发服务器，重新运行npm start或yarn start——CRA只会在启动时加载环境变量，修改文件后不重启不会生效。
• 再在组件里打印变量，应该能正常读取了。

额外注意事项： #

• 所有自定义环境变量必须以REACT_APP_开头，CRA会自动忽略不带这个前缀的变量，避免和系统变量冲突。
• 如果你的项目不是用CRA创建的，而是自定义Webpack配置，用dotenv-webpack的话，需要正确配置：
  1. 安装依赖：npm install dotenv-webpack --save-dev
  2. 在webpack.config.js里添加插件：

     const Dotenv = require('dotenv-webpack');
     
     module.exports = {
       // ...其他配置
       plugins: [
         new Dotenv()
       ]
     };
     

  同样要确保文件名是.env，并且重启Webpack开发服务器。

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