react项目配置不同环境下的接口地址_react-app-rewired启动项目时如何传入变量来读取不用环境的接口地址

思路就是使用配置文件 和全局变量
1 修改package.json
记得先
npm i cross-env -S

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
     //以下为新增命令
     // 开发环境启动
    "server:dev": "cross-env env_config=dev node scripts/start.js",
     // 测试环境启动
    "server:test": "cross-env env_config=test node scripts/start.js",
     // 开发环境打包
    "build:dev": "cross-env env_config=dev node scripts/build.js",
     // 测试环境打包
    "build:test": "cross-env env_config=test node scripts/build.js"
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/config/dev.env.js 新增文件

'use strict'
module.exports =  {
 NODE_ENV: '"development"',
 API_ROOT: '"https://devapi.xxx.com"',
 OTHER_DATA: '"123"'
};
1
2
3
4
5
6

/config/test.env.js 新增文件

'use strict'
module.exports =  {
  NODE_ENV: '"development"',
  API_ROOT: '"https://testapi.xxx.com"',
  OTHER_DATA: '"456"'
}
1
2
3
4
5
6

/config/env.js 修改文件

// 最上边引入我们定义的配置文件
const myEnv = require('./' + process.env.env_config + '.env');
// 98行
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      // 将我们定义的字段加进入, 随着配置定义到全局变量
      return Object.assign(env, myEnv); // 修改前为 return env;
    }, {}),
  };

1
2
3
4
5
6
7
8
9
10
11

最后启动项目

验证效果
  console.log('组件输出全局变量', process.env);
1
2