react下设置baseUrl

最新推荐文章于 2023-09-06 15:53:04 发布

Ylovd_

最新推荐文章于 2023-09-06 15:53:04 发布

阅读量1.8k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/huangmiaomiao1/article/details/127226992

版权

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>
  );

}