一、公共.env环境变量
二、.env.*环境变量(例如：.env.test 环境变量)
公共 .env 环境变量
在项目开发中，我们不可避免的会需要使用 .env 环境变量，例如在定义接口 api 的 baseURL 时，会根据不同的环境，配置不同的根地址 baseURL。
class ApiBaseUrl {
static getApiBaseURL = () => {
switch (process.env.NODE_ENV) {
case 'development':
return 'http://192.168.0.216:9000'
default:
return 'https://mock.apifox.cn/m2/2775158-0-default';
}
}
}
使用 create-react-app 命令创建的 react 项目，在使用 yarn run eject 命令将所有内建的配置暴露出来后，在 package.json 文件中，提供了一个 start 命令，和一个 build 命令，这两个命令在
"scripts": {
"start": "cross-env PORT=5432 node scripts/start.js",
"build": "cross-env node scripts/build.js",
"test": "node scripts/test.js"
},
根据命令，可以在根目录的 scripts 文件夹下，找到 start.js、build.js 两个文件，打开文件可以看到
start.js 文件
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
...
// Ensure environment variables are read.
require('../config/env');
...
build.js 文件
// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
...
// Ensure environment variables are read.
require('../config/env');
...
在这两个文件中会读取 .env 文件。
在根目录，/config/env.js 文件中的 getClientEnvironment 方法，会将 REACT_APP 开头的环境变量写入。
因此可以在根目录下创建一个 .env 文件，写一些自定义的公共环境变量（在变量名前加了 “REACT_APP_” 前缀，这是因为 React 会自动将以 “REACT_APP_” 开头的变量添加到 “process.env” 对象中）。
/config/env.js 文件
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
// We support configuring the sockjs pathname during development.
// These settings let a developer run multiple simultaneous projects.
// They are used as the connection `hostname`, `pathname` and `port`
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
// and `sockPort` options in webpack-dev-server.
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
// Whether or not react-refresh is enabled.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
}
);
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
return { raw, stringified };
}
由于 create-react-app 只提供了 production、development 两种环境，如果想再加一个 test 环境，就需要手动设置了，或是在package.json 文件的命令中加。
下面提供了一种方式，将项目的环境变量与命令绑定，通过跑不通的命令来控制环境变量
.env.* 环境变量
dotenv、dotenv-cli
安装命令
$ npm install -D dotenv-cli
或
$ yarn add dotenv-cli --dev
使用方法
这里以.env.test 为例
- 在项目根目录创建
.env.test文件
- 在
.env.test文件中写入内容
# .env.test
REACT_APP_ENV = 'test'
- 在 package.json 文件中加一行命令
"start:test": "cross-env PORT=4321 dotenv -e .env.test node scripts/start.js",
- 在代码中使用，查看是否生效
class ApiBaseUrl {
static getApiBaseURL = () => {
console.log('process.env.REACT_APP_ENV:',process.env.REACT_APP_ENV)
switch (process.env.REACT_APP_ENV) {
case 'development':
return 'http://192.168.0.216:9000'
case 'test':
return 'https://mock.apifox.cn/m1/4562135-0-default'
default:
return 'https://mock.apifox.cn/m2/2775158-0-default'
}
}
}
- 需要打包 test 环境，在 package.json 文件中加一行命令
"build:test": "cross-env dotenv -e .env.test node scripts/build.js",
打包后在服务器看也能看到 test 的环境变量
（没有服务器，可以本地起一个服务器尝试）
如果还需要别的变量，只需要采用
REACT_APP_(name)的命名格式，在需要的环境变量文件中创建就可以了。
项目中可以通过process.env.REACT_APP_(name)对创建的变量进行访问。
package.json 文件
"scripts": {
"start:develop": "cross-env PORT=4321 dotenv -e .env.development node scripts/start.js",
"start:test": "cross-env PORT=4321 dotenv -e .env.test node scripts/start.js",
"build:test": "cross-env dotenv -e .env.test node scripts/build.js",
"build": "cross-env node scripts/build.js",
"test": "node scripts/test.js"
},
参考：
React使用.env.*进行环境部署
React项目配置axios和反向代理和process.env环境配置等
