官网文档地址：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 默认有三个可能的值，分别是：
- development：开发环境，运行 npm start, NODE_ENV 的值为 development;
- test：测试环境，运行npm run test 则是 test;
- 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中使用了该变量引用图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
默认改变量的值是空（“”），上面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不识别。
说明：此功能适用于 react-scripts@0.5.0 及更高版本，可以通过以下命令更新：
npm install --save --save-exact react-scripts@1.1.4
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 (
<div className="App">
{process.env.REACT_APP_TEST}<br/>
</div>
);
}
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
> test@0.1.0 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! test@0.1.0 build:stage: `dotenv -e .env.development react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the test@0.1.0 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 dotenv-cli@3.2.0 checking installable status
[..................] \ fetchMetadata: sill resolveWithNewModule dotenv-cli@3.2.0 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
网友评论