react下设置baseUrl

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

ENV = 'development'
REACT_APP_URL = 'http://localhost:8080'

2、在utils文件夹下 创建url.js

export const BASE_URL = process.env.REACT_APP_URL;

3、在utils文件夹下 创建axios.js

import axios from 'axios';

export const axiosAPI = axios.create({
    baseURL: process.env.REACT_APP_URL
});

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

const Swipers = () => {
   // 设置轮播图数据和加载状态state
   const [swipers, setSwipers] = useState([]);
   const [swipersLoaded, setSwipersLoaded] = useState(false);

   // 第一次挂载组件时获取轮播图数据
   useEffect(() => {
    const getSwipers = async () => {
        const swipersRes = await axios.get(`/home/swiper`);
        // console.log(swipersRes)
        setSwipers(swipersRes.data.body);
        setSwipersLoaded(true);
    };

    getSwipers();

    // 卸载组件时取消加载状态，防止内存溢出
    return () => {
        setSwipersLoaded(false);
    };
  }, []);

  // 生成轮播图
  const swiperItems = swipers.map((item) => (
    <Swiper.Item key={item.id}>
        <div>
            <img
                src={`${BASE_URL}${item.imgSrc}`}
                alt=""
                style={{ width: '100%' }}
            />
        </div>
    </Swiper.Item>
  ));

  return (
      // 判断是否有加载轮播图，如已加载则显示轮播图
      swipersLoaded && <Swiper autoplay loop>{swiperItems}</Swiper>
  );

}

5、npm start