部署Vite+Vue项目至gh-pages时出现空白页与404错误

针对你遇到的资源路径缺失仓库名导致的404问题，按以下步骤排查修复：

• 清理冗余配置文件：如果你是用Vite创建的Vue3项目，删除vue.config.js——Vite不识别这个配置文件，反而可能和vite.config.js的设置产生冲突，导致base路径不生效。

• 正确配置Vite的base路径：
  打开vite.config.js，确保base字段设置为你的仓库名称（前后必须带斜杠），示例如下：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    base: '/你的仓库名称/' // 比如仓库叫vue-todo-list，就写'/vue-todo-list/'
  })
  

• 验证构建产物路径：
  删除旧的dist文件夹，重新执行yarn build。打开dist/index.html，检查里面的资源引用路径，应该是/你的仓库名称/assets/xxx.js格式，而不是直接/assets/xxx.js。如果路径正确，说明配置生效了。

• 本地预验证（可选但推荐）：
  全局安装serve工具：yarn global add serve，然后执行serve dist，在本地访问生成的地址，确认所有资源能正常加载，页面显示正常。

• 重新部署：
  执行yarn run gh-pages -d dist完成部署，等待GitHub Pages更新后再访问页面。

• 关于GitHub Actions的注意点：
  如果用Actions部署，不需要在package.json里设置homepage，Vite的base配置已经足够。确保工作流中的构建命令是yarn build，部署的目标文件夹是dist即可。

你之前的问题大概率是因为同时存在vite.config和vue.config两个配置文件导致冲突，或者base路径的格式错误（比如缺少首尾斜杠），清理冗余配置并修正base路径后就能解决。

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