修改Vite配置base后JSON.parse报错，寻求解决方案

问题原因 #

当Vite配置base: "/test"后，项目的部署根路径变为/test/。此时用相对路径../data/data.json发起请求时，浏览器会基于当前页面URL解析路径，导致请求地址超出项目base范围，返回的是404页面的HTML内容而非目标JSON文件，最终触发JSON.parse语法错误。

解决方案 #

方法1：使用Vite内置的import.meta.env.BASE_URL（推荐） #

Vite会自动注入import.meta.env.BASE_URL变量，其值等于配置文件中设置的base值，用它拼接JSON路径可适配任意base配置：

修改产品列表组件的fetch代码：

const [productData, setProductData] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    // 基于BASE_URL拼接正确的JSON路径
    const response = await fetch(`${import.meta.env.BASE_URL}data/data.json`);
    const data = await response.json();
    setProductData(data);      
  };

  fetchData();
}, []);

return (
  <div>
    {productData.map((item, index) => (
      <Card product={item} key={index}/>
    ))}
  </div>
)

方法2：硬编码绝对路径（不推荐） #

直接使用包含base的绝对路径，但这种方式灵活性差，修改base配置后需同步修改路径：

const response = await fetch('/test/data/data.json');

方法3：将JSON文件移至public目录 #

Vite会把public目录下的文件原封不动复制到构建后的根目录，此时可直接通过BASE_URL访问：

1. 将data.json移至public/data/data.json
2. 组件中请求路径改为：

const response = await fetch(`${import.meta.env.BASE_URL}data/data.json`);

内容的提问来源于stack exchange，提问作者Arthur _