您已经使用CreateReactApp[1]脚手架构建了一个React应用，现在是时候部署它了。通常使用npmrunbuild或yarnbuild来构建静态资源，这些资源由Web服务器托管。你会体验到：多种环境：test、staging、prod，它们都是独立的服务器，不同的主机名，需要打包不同的包。或者你可以手动写if/else来配置不同环境下后端API的基地址：api-config.jsletbackendHost;constapiVersion='v1';consthostname=window&&window.location&&window.location.hostname;if(hostname==='realsite.com'){backendHost='https://api.realsite.com';}elseif(hostname==='staging.realsite.com'){backendHost='https://staging.api.realsite.com';}elseif(/^qa/.test(hostname)){backendHost=https://api.${hostname};}else{backendHost=process.env.REACT_APP_BACKEND_HOST||'http://localhost:8080';}exportconstAPI_ROOT=${backendHost}/api/${apiVersion};然后在你的应用程序文件api.js中，导入这个配置import{API_ROOT}from'./api-config'functiongetUsers(){returnfetch('${API_ROOT}/users').then(res=>res.josn).then(json=>json.data.users)}毕竟不够优雅。React工程：通过环境变量灵活配置react构建时编织变量的概念需要提醒的是，环境变量是在构建阶段编织的。一旦前端训练完成，构建过程完成，构建输出中的变量值就会固定下来。（不管输出放在哪个服务进程或环境中）。毕竟，React应用程序作为静态资源运行在浏览器上，但是对于浏览器来说，环境变量就没有意义了。情况1。通过环境变量配置后端基地址。CreateReactAPP脚手架创建一个react应用，环境变量可以通过全局process.env获取。1.process.env.NODE_ENV在构建时设置为生产环境。您还可以使用以REACT_APP_开头的环境变量来配置processes.env。因此，REACT_APP_API_HOST=example.comyarnrunbuild会产生如下效果：process.env.REACT_APP_API_HOST="example.com"process.env.NODE_ENV="production"如何设置环境变量？windows:set/setx命令；linux：export命令，这里不再赘述。案例2。.env文件的临时环境变量可以影响全局process.env的下层变量值，但不够方便。CreateReactApp支持使用.env文件永久保存环境变量的值。创建一个包含以下内容的.env文件；REACT_APP_SPECIAL_FEATURE=trueREACT_APP_API_HOST=default-host.com以上环境变量会在打包后的开发、测试和生产中生效。如果要为不同的环境设置变量，可以放置.env.development、env.test、.env.production文件。再次提醒：环境变量不仅可以用来配置后端基地址，还可以灵活的作为reactapp的业务配置。原作者：有态度的马甲
