Github Pages部署Vite构建的项目后图片无法加载如何解决？

你遇到的图片加载失败是部署路径配置不匹配导致的：你的Github Pages站点部署在子路径/Portfolio/下，但Vite默认构建时资源引用路径是站点根路径/，请求资源时会拼接成根路径下的地址，找不到/Portfolio/子路径下的静态资源，所以返回404错误。

• 第一步：修改Vite配置文件（vite.config.js或vite.config.ts），添加base配置项，值为你的仓库名/Portfolio/：

import { defineConfig } from 'vite'
export default defineConfig({
  // 新增这一行，和你的Github Pages子路径保持一致
  base: '/Portfolio/',
  // 其他原有配置保持不变
})

• 第二步：检查你代码里的静态资源引用写法，包括Three.js加载纹理用到的图片路径：
  • 不要写根路径开头的绝对路径比如/images/xxx.png，改用相对路径或者用Vite提供的环境变量拼接路径，示例：

  // 普通图片引用
  const imgUrl = new URL('./images/xxx.png', import.meta.url).href
  // Three.js纹理加载示例
  const texture = new THREE.TextureLoader().load(
    `${import.meta.env.BASE_URL}images/xxx.png`
  )
  

• 第三步：重新执行构建命令npm run build，把新的dist目录内容推送到Github仓库对应的部署分支。
• 第四步：等待Github Pages部署完成后，清空浏览器缓存再访问站点即可。

如果修改完还是存在加载失败问题，检查dist目录下的index.html里引用的css、js、图片路径是不是都已经带上了/Portfolio/前缀，确认构建产物路径正确再推送。

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