如何给 ReactJS 应用增加配置文件？

假设我们编写了一个 ReactJS 应用，这个应用需要调用另外一台服务器上的 API。我们在调试的时候可以把服务的 URL 直接写进代码里，但是在部署的时候怎么办呢？一般部署的时候被调用的服务器可能会改变。

我们可以使用环境变量来解决这个问题。我们可以增加一个 config.js 文件。这个文件的代码如下：

export const API_URL = 
    process.env.NODE_ENV === "development" ? "http://10.222.48.232:5000" : `${process.env.REACT_APP_API_URL}`
console.log(`API_URL: ${API_URL}`);

在这里，当我们使用 npm start 调试应用的时候 NODE_ENV 永远等于 development，在使用 npm run build 的时候等于 production。上面的代码在调试的时候使用地址 http://10.222.48.232:5000，在做 build 的时候，它会使用环境变量 REACT_APP_API_URL 来代替。注意这个 REACT_APP_API_URL 是我们编译时的环境变量，不是下载了应用的客户端的环境变量，另外这个环境变量必须是 REACT_APP 开头，否则 React 不会把它带到代码中。

最后要说的是这个方法只在 npm run build 的时候有效，做好了的 build 即使环境变量改了，对应的配置也不会改变。