二、React环境变量

官网文档地址：https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/
dotenv配置与使用:https://juejin.cn/post/6917794798732574733
dotenv 的使用:https://juejin.cn/post/6844904198929121288

仅供自己学习使用，喷子勿评。
npm -g install dotenv-cli

在实际开发中，前端er会面对多个环境的接口：开发环境、测试环境、生产环境...这些环境最终要的区别是API的URL不同，所以代码中不能将URL写死，而是要根据不同的环境配置。

注：create-react-app或者 umi这样的脚手架初始化的项目，会将webpack的配置黑盒化了，如何在不执行 eject 操作的前提下优雅地配置多个项目环境呢？（最好不要一遇到问题就一键执行 eject 操作， eject 操作是不可逆的，执行之后会把所有细节都暴露在我们面前，让项目目录变得很庞大）

create-react-app 支持多环境，接下来我们一起看下如何设置。

1、react自带的两个环境变量：

1.1）NODE_ENV

create-react-app 创建的项目有内置的环境变量NODE_ENV，该变量是自动赋值的，不可更改。在js代码中可通过 process.env.NODE_ENV 读取它。NODE_ENV 默认有三个可能的值，分别是：

1. development：开发环境，运行 npm start, NODE_ENV 的值为 development;
2. test：测试环境，运行npm run test 则是 test;
3. production：生产环境，运行npm run build 则对应 prodution.

比如开发环境的 API 的 URL 为 urlDev，生产环境的 URL 为 urlProd，就可通过环境变量，判断当前环境，使用相应的 URL：

let env = process.env.NODE_ENV
 
let baseUrl = ''
 
if (env === 'development') {
  baseUrl = urlDev
} else if (env === 'production') {
  baseUrl = urlProd
}
 
get(baseUrl) // 伪代码，表示请求动作

简单的系统，我们通过上面代码已经能够完成不同环境的设置了。

1.2）PUBLIC_URL：

这个变量可以用于引用模块系统之外的资源路径前缀，用create-react-app脚手架创建的react项目，在public目录下，有index.html、favicon.ico等文件，index.html中使用了该变量引用图片：

默认改变量的值是空（“”），上面index.html中，href=“/favicon.ico”表示站点根路径，可以设置该变量为cdn，加速静态资源访问效率。

1）如何使用改变量：

html中通过%PUBLIC_URL% 获取变量值
js中通过process.env.PUBLIC_URL 获取变量值

2）设置该变量：

在.env文件中设置该变量的值为一个合法的url路径，打包后，在使用该变量的文件中就会被替换成对应的值。（.env文件相关内容见下文）

更多的自建变量：https://create-react-app.dev/docs/advanced-configuration/

2、多环境设置：

项目的根目录添加一系列名为 .env的文件，里面写上变量名和值，打包后，可以在js代码中通过process.env.REACT_APP_XXX读取到对应文件中的变量值。
注：文件中的变量必须以REACT_APP_ 开头，其他的react不识别。
说明：此功能适用于 [email protected] 及更高版本，可以通过以下命令更新：

npm install --save --save-exact [email protected]

2.1）默认可以使用哪些 .env 文件？

默认，可以在项目根目录下建立如下文件：

• .env：默认。
• .env.local：本地覆盖。除 test 之外的所有环境都加载此文件。
• .env.development, .env.test, .env.production：设置特定环境。
• .env.development.local, .env.test.local, .env.production.local：设置特定环境的本地覆盖。

左侧的文件比右侧的文件具有更高的优先级：

• npm start： .env.development.local, .env.development, .env.local, .env
• npm run build： .env.production.local, .env.production, .env.local, .env
• npm test： .env.test.local, .env.test, .env (注意没有 .env.local )

注：实际测试发现添加完.env文件后，需要重新执行npm start后，代码中获取变量才能生效。

看个示例：

1）在项目根目录建立两个文件：

.env.development文件，内容：REACT_APP_TEST=development
.env.production文件，内容：REACT_APP_TEST=production

2）在js中通过如下代码访问变量：

function App() {
  return (
    

      {process.env.REACT_APP_TEST}

    
  );
}
export default App;

3）访问变量值：

执行npm start后，访问页面，得到的变量值为：development
执行npm build后，再执行serve -s build，访问页面，得到的变量值为：production

2.2）dotenv管理环境变量：

上面知道，默认通过create-react-app创建的react项目只能支持上面几种.evn文件，并且通过npm run build只能指定.env.production和默认.env文件中的环境变量，假设系统还有个stage环境，该如何指定呢？官方推荐使用dotenv来做环境变量的管理。dotenv的github地址：https://github.com/motdotla/dotenv

看一个例子：

1）在项目根目录建立三个文件：

• .env.development文件，内容：REACT_APP_TEST=development
  .env.stage文件，内容：REACT_APP_TEST=stage
  .env.production文件，内容：REACT_APP_TEST=production

2）在js中通过如下代码访问变量：

同上

3）修改 package.json 中的 scripts来指定环境：

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:stage": "dotenv -e .env.stage react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

4）访问变量值：

npm run build:stage

在使用前需要安装dotenv-cli（https://github.com/entropitor/dotenv-cli），否则会报如下错误：

# npm run build:stage
 
> [email protected] build:stage /tmp/test
> dotenv -e .env.development react-scripts build
 
sh: dotenv: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] build:stage: `dotenv -e .env.development react-scripts build`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] build:stage script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-08-30T16_22_57_811Z-debug.log

安装dotenv-cli：

# npm -g install dotenv-cli
[..................] / rollbackFailedOptional: verb npm-session dfed37ae051d8c52
[..................] \ fetchMetadata: sill resolveWithNewModule [email protected] checking installable status
[..................] \ fetchMetadata: sill resolveWithNewModule [email protected] checking installable status
/usr/local/node-v12.9.0-linux-x64/bin/dotenv -> /usr/local/node-v12.9.0-linux-x64/lib/node_modules/dotenv-cli/cli.js

然后再次执行：npm run build:stage，之后启动serve：serve -s build
访问页面，得到变量值为：test

参考：

https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/

https://juejin.im/post/6844904015528984583

https://blog.csdn.net/ZYC88888/article/details/82729313

https://juejin.im/post/6844903968288538638
————————————————
原文链接：https://blog.csdn.net/liuxiao723846/article/details/108313832