从我的react应用程序中的环境变量加载值不起作用

process.env 是环境通过nodejs提供的全局对象。因为浏览器中没有nodejs,所以无法理解 process.env.API_ROOT . 初始化应用程序时使用 react-create-app 具有 webpack 默认包含,因此我建议您使用 .env 通过使用设置环境变量的文件 dotenv .

注释 : dotenv 包含在 create-react-app v0.2.3 更高

1. 创造 Env 文件包括

   API_ROOT=http://dev.example.com/api
   APP_ROOT=http://app.example.com
   REACT_APP_API_ROOT=http://www.example.com:3002/api
   REACT_APP_APP_ROOT=http://app.example.com:3002
   

2. 配置WebPACK:

   const webpack = require('webpack');
   const dotenv = require('dotenv');
   
   module.exports = () => {
     // call dotenv and it will return an Object with a parsed key 
     const env = dotenv.config().parsed;
   
     // reduce it to a nice object, the same as before
     const envKeys = Object.keys(env).reduce((prev, next) => {
       prev[`process.env.${next}`] = JSON.stringify(env[next]);
       return prev;
     }, {});
   
     return {
       plugins: [
         new webpack.DefinePlugin(envKeys)
       ]
     };
   

参考文献:

• https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5
• https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

希望这会有所帮助。