Github Pages部署three.js项目canvas及资源导入报404错误

Vite项目默认打包时的资源基础路径为站点根路径/，但Github Pages部署仓库项目页时，站点的实际访问路径带有仓库名前缀，格式为用户名.github.io/仓库名/。你当前配置的/image类绝对路径资源，部署后会被请求到用户名.github.io/image/路径下，而非用户名.github.io/ThreeJSDemo2/image/的实际资源存放路径，因此所有JS、图片、Three.js相关资源全部返回404，仅能渲染直接写在HTML里的内容。
本地npm run preview正常是因为本地预览服务默认运行在根路径下，和Github Pages的子路径部署场景不一致，无法复现该问题。

• 打开项目根目录下的Vite配置文件vite.config.js（或vite.config.ts），添加base配置项，值与你的Github仓库名完全一致，前后都带斜杠：

import { defineConfig } from 'vite'
// 其他已有的导入项保持不变

export default defineConfig({
  base: '/ThreeJSDemo2/',
  // 其余原有配置（plugins、build配置等）不需要修改
})

• 确认public目录下的静态资源引用没有额外写死域名或错误前缀，配置base后Vite打包时会自动给所有资源路径拼接正确的前缀，不需要手动修改每个资源的引用地址。
• 重新执行构建和部署命令：

npm run build
npm run deploy

• 等待Github Pages部署完成（通常1~3分钟），使用Ctrl+F5强制刷新浏览器清除缓存后访问，Three.js画布和所有静态资源即可正常加载。

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