使用Vite构建后部署GitHub Pages项目站点时绝对路径失效问题

问题核心：本地服务器运行在根路径下，绝对路径/assets/xxx.js能正常指向资源，但GitHub Pages项目站点部署在https://<用户名>.github.io/<项目名>/这样的子路径下，绝对路径会错误指向根域名的资源目录，导致无法加载。

解决方案：

• 修改Vite配置文件（vite.config.js或vite.config.ts），设置base为你的GitHub仓库名称：

  import { defineConfig } from 'vite'
  // 引入对应框架插件，比如Vue/React等
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    base: '/你的仓库名称/' // 替换为实际GitHub仓库名，比如'/my-vite-project/'
  })
  

• 重新执行vite build构建项目，此时生成的HTML中资源路径会自动适配子路径，比如变为/你的仓库名称/assets/index-BbwXgWnI.js，部署到GitHub Pages后即可正确解析。

注意：如果是部署到个人/组织的根站点（比如<用户名>.github.io），则base可以保持默认的'/'。

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