react环境变量_react 环境变量

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">
    <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/>
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
                                    Vue和React 环境变量
一般我们开发的时候有这么几个环境，开发环境（development ）、测试环境（test）、生产(线上)环境（production），而这也就导致了我们在不同的环境情况下，请求数据的地址是不同的，但是我们如果没切换一个环境都修改咱们的代码中的请求地址，这显然是不明智的，因此就了配置环境变量一说
需要在Vue的脚手架（Vue-CLI）中使用
在根目录下创建下...
                                    node对应文件方式set 命令参数方式cross-env 方式webpack serve方式webpack-dev-server 方式umi 方式env-cmd方式dotenv方式创建项目vite方式创建项目React项目在不同开发、测试、预生产、生产、本地运行等情况，需要配置不同的命令。脚手架默认的配置项很多时候远远不够，注释修改不同代码来适配不同环境很繁琐。npm run eject步骤不可逆，最好提前做好备份，有git的先提交代码后再操作。package.json文件，不允许有注释。
                                    /自定义变量时,必须要以REACT_APP开头定义。// .env文件NODE_ENV = local // 这个变量根据启动方式自动判断// .env.development文件NODE_ENV = development // 这个变量根据启动方式自动判断// .env.production文件NODE_ENV = production // 这个变量根据启动方式自动判断process.env.(变量名)...
公共配置文件放在这里有一个好处就是任何人可以实时修改配置文件，然后程序会根据你的修改运行对应的逻辑或者变量，如：
我们的开发人员做了这个配置文件功能，我们就可以告诉其他非研发同事在这里配置所需内容，是不是很方便？下面来看一下
1.在public中创建config.js
window.config = {
	baseUrl: 'xxxxx',
	mainTitle: 'xxxx'.
                                    不同文件名，在执行命令时的优先级，从左到右，中需要使用，创建环境变量时，必须以。文件的，需要手动创建，也可以使用。环境变量定义好之后，在代码中通过。例如：访问上面定义的。前后空格可留可不留。