Vite+React项目部署GitHub Pages后SVG文件404加载失败求助

问题根源 #

GitHub Pages部署的项目运行在子路径（/static-job-listing/）下，你本地用的相对路径./static-job-listing/sass/...在部署后会指向错误的服务器路径，再加上Vite默认base配置为根路径，直接导致资源找不到。

具体解决方案 #

1. 配置Vite的base路径 #

在项目根目录的vite.config.js中添加base配置，值为你的GitHub仓库名称：

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

export default defineConfig({
  plugins: [react()],
  base: '/static-job-listing/'
})

2. 调整图片引用路径 #

方法一：用public目录存放静态资源

• 把SVG图片移动到项目根目录的public文件夹下，创建对应目录结构：public/static-job-listing/sass，将所有logo文件放入其中。
• 修改img标签的src路径：

<img src={`/static-job-listing/sass/${job.logo}`} alt="company logo"/>

public目录下的文件会被Vite直接复制到构建后的dist根目录，部署后路径能正确匹配服务器子路径。

方法二：通过Vite模块解析引入图片

如果不想用public目录，可以利用Vite的模块解析能力动态生成正确路径：

const logoUrl = new URL(`./static-job-listing/sass/${job.logo}`, import.meta.url).href;
<img src={logoUrl} alt="company logo"/>

这种方式会在构建时自动适配部署后的子路径，无需手动调整。

3. 确认GitHub Actions配置正确 #

确保部署脚本正确执行build命令并部署dist目录，示例配置片段：

- name: Build
  run: npm run build
- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./dist

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