创build反应应用程序无法读取环境variables

我有一个反应的应用程序，用create-react-app创build，然后用命令构build应用程序： npm run build

如果我们通过运行ENV=production npm run start应用程序和开发代码，运行ENV=production npm run start它可以读取process.env.ENVvariables，因为我将这个插件添加到webpack dev config

  new webpack.DefinePlugin({ 'process.env':{ 'ENV': JSON.stringify(process.env.ENV), } }),

我也将上面的脚本添加到webpack prod config，但是如果在构buildENV=prod serve -s build后尝试执行此命令，则无法读取环境variables

如何解决这个问题？

你无法读取ENV的原因是因为：

（1）在开发模式下， webpack您的文件并捆绑您的应用程序。它也会读取（因为DefinePlugin ）你的process.env.ENV并将其作为一个全局variables添加。所以它基本上是从process.envpipe道variables到你的JS应用程序。

（2） 构build应用程序（使用webpack ）后，所有内容都已经捆绑到一个或多个文件中。在运行服务器时，只需启动一个服务于静态构build文件的HTTP服务器即可。所以没有办法将ENV传递给你的应用程序。

基本上DefinePlugin所做的就是向该包添加一个var 。例如

 new webpack.DefinePlugin({ 'token': '12356234ga5q3aesd' })

会添加一个类似这样的行：

 var token = '12356234ga5q3aesd';

因为JS文件是静态的，所以在你使用webpack /捆绑之后，没有办法改变这个variables。基本上，当你做npm run build生成你正在创build编译的二进制/ .dll / .jar / …文件，并不能再通过插件影响其内容。