使用Vite构建后Fetch与动态路径失效问题求助

Vite在生产构建时会对src目录内的资源进行哈希重命名，并将它们打包到dist/assets目录下，不会保留原有的src目录结构。所以直接使用src/imgs/icons/icon.png这类路径时，部署后服务器上根本不存在这个路径，自然会返回404。静态导入能生效是因为Vite在构建时会自动解析这类导入，替换为正确的打包后路径。

一、动态图片路径处理 #

方案1：使用new URL()让Vite解析动态路径 #

在React组件中，通过new URL()结合import.meta.url来生成正确的资源路径，Vite会在构建时自动识别并处理这些资源：

// 假设item.machineImg是相对src目录的路径，比如'../imgs/icons/icon.png'
<img 
  src={new URL(item.machineImg, import.meta.url).href} 
  alt="imgMachine" 
/>

这种方式的好处是Vite会对图片进行优化（压缩、哈希命名），并且路径会自动适配生产环境。

方案2：将图片移至public目录 #

在项目根目录创建public文件夹，把图片放到public/imgs/icons/下，然后直接使用绝对路径访问：

// item.machineImg改为'/imgs/icons/icon.png'
<img src={item.machineImg} alt="imgMachine" />

public目录下的文件会被原封不动复制到dist根目录，部署后路径直接对应服务器根路径，无需额外处理。

二、JSON文件的Fetch请求处理 #

方案1：将JSON移至public目录 #

把src/data/items.json移动到public/data/items.json，然后修改fetch路径为绝对路径：

fetch('/data/items.json')
  .then(res => res.json())
  .then(data => { /* 处理数据 */ })

方案2：静态导入JSON文件（推荐，无需额外请求） #

如果JSON内容不需要动态更新，直接在组件顶部静态导入，避免fetch请求：

import itemsData from '../data/items.json';

// 直接使用itemsData变量即可
console.log(itemsData);

三、Vite配置补充 #

如果你的项目部署到Firebase的子路径（而非根域名），需要在vite.config.js中配置base路径：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/your-subpath/' // 比如部署到https://webpage.web.app/blog/，就填'/blog/'
});

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