react中 如何搭建多环境

第一步 创建脚手架

create-react-app demo
# 安装依赖
pnpm i dotenv-cli

 也可以使用cnpm、npm、yarn安装依赖

 第二步 建立不同环境文件

// .env.development 
# 本地开发环境 
NODE_ENV = development 
# 本地地址api 
REACT_APP_API_PATH = http://localhost:7001 
// .env.production 
# 线上环境 
NODE_ENV= production 
# 线上地址api 
REACT_APP_API_PATH = http://59.110.46.248:8888 

// 增加其他公用api以REACT_APP开头_连接可以随意增加如： 

REACT_APP_APP_id = 1231224923884329 

第三步 设置脚本执行

// dotenv 直接将根目录下.env 结尾的文件中的变量添加到 process.env 上 
// dotenv -e 可以指定一些其他的.env 文件，将变量添加到 process.env 上 

dotenv -e 可以指定一些其他的.env 文件，将变量添加到 process.env 上 
"scripts": {
    "start": "dotenv -e .env.development react-scripts start", 
    "start:prod": "dotenv -e .env.production react-scripts start", 
    "build": "d

第四步 获取环境地址

使用process.env 在react项目中任意位置进行打印

console.log(process.env, 'process.env');

//{
//  "NODE_ENV": "development",
//  "PUBLIC_URL": "",
//  "FAST_REFRESH": true,
//  "REACT_APP_API_PATH": "http://localhost:7001",
//  "REACT_APP_APP_id": "1231224923884329"
//}

第五步 设置全局请求地址

集成axios 设置bash地址

// request.js
import axios from 'axios'
const instance = axios.create({
    baseURL: process.env.REACT_APP_API_PATH, // 在此可以统一增加前缀也可在.env文件中进行设置然后拼接
    timeout: 2500
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default instance

注：vue3 可直接建立对应环境文件 变量前缀改为VUE_APP 即可，修改脚本 只需指定—mode 对应环境 即可，如：

// vue create vue-demo -m npm 解决无法使用pnpm改为 指定npm
// .env.dev
NODE_ENV = ‘development’
VUE_APP_MODE = ‘dev’
VUE_APP_API_HOST = ‘本地开发api地址’
// 脚本设置
“dev”: “vue-cli-service serve --mode dev”, // 开发环境

UMI 配置多环境

1.项目根目录建立环境文件

// .umirc.production.ts
import { defineConfig } from 'umi';

export default defineConfig({
    define: {
        'process.env.NODE_ENV': 'production',
        'process.env.UMI_ENV_REQUEST_URL': 'http://59.110.46.248:888'
    },
});

2.配置启动脚本

"scripts": {
    "dev": "cross-env UMI_ENV=development max dev",
    "start": "cross-env UMI_ENV=production max dev",
    "build": "cross-env UMI_ENV=development max build",
    "build:prod": "cross-env UMI_ENV=production max build",
    "postinstall": "max setup",
    "setup": "max setup"
  }

3.项目中使用

console.log(process.env, 'process.env');