GitHub Pages自定义域名部署React+Vite应用遇MIME类型错误

核心问题是Vite的base配置和自定义域名的路径不匹配，导致资源请求路径错误，GitHub Pages返回404页面（HTML格式），从而触发MIME类型阻止。按以下步骤修复：

• 修正Vite的base配置
  打开vite.config.ts，将base属性从原来的'/myrepo/'改为'/'——因为自定义域名是根域名，不需要带仓库路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/', // 关键修改：移除仓库名前缀
  })
  

• 清理旧部署分支并重新部署
  本地和远程的gh-pages分支可能残留旧路径配置，先清理再重新部署：

  1. 删除本地gh-pages分支：git branch -D gh-pages
  2. 删除远程gh-pages分支：git push origin --delete gh-pages
  3. 重新构建并部署：npm run deploy

• 验证CNAME配置
  确保gh-pages分支根目录下的CNAME文件内容仅为my-domain.com，无多余空格或换行。同时检查GitHub Pages设置里的自定义域名已正确填写my-domain.com，DNS解析生效后可开启Enforce HTTPS。

• 清除缓存测试
  浏览器缓存可能残留旧资源路径，用无痕模式打开https://my-domain.com，或手动清空浏览器缓存后再测试。

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