react项目中统一处理 baseURL ，利用脚手架的环境变量

最新推荐文章于 2025-01-10 11:43:08 发布

原创最新推荐文章于 2025-01-10 11:43:08 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #reactjs

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在React项目中通过创建.env.development文件来设定生产环境变量，以统一处理baseURL。在utils文件夹下创建了url.js和api.js，用于管理和调用API。在需要发送axios请求或拼接图片URL的页面，可以引入这些配置，启动项目时需重新运行`npm start`。

部署运行你感兴趣的模型镜像

根目录下(与src平级) 新建生产环境变量文件 .env.development

REACT_APP_URL = http://localhost:8080

在utils文件夹下创建url.js 和 api.js文件
url.js文件：

export const BASE_URL = process.env.REACT_APP_URL

    api.js文件：

import axios from 'axios'
import { BASE_URL } from './url'

// 创建axios实例
export const API = axios.create({
   baseURL: BASE_URL
})

在需要发送axios请求和拼接图片URL 的页面

// import axios from 'axios';
import { API } from '../../utils/api'
// 引入 BASE_URL
import { BASE_URL } from '../../utils/url.js'


// const res = await axios.get(`http://localhost:8080/area/map?id=${id}`);
const res = await API.get(`/area/map?id=${id}`);
// <img src={`http://localhost:8080${item.houseImg}`} alt="" /> 
<img src={BASE_URL + item.houseImg} alt="" />