Hostinger自定义域名绑定GitHub仓库后页面空白的问题求助

你的问题核心是Vite的base配置与自定义域名的路径不匹配，导致静态资源加载路径错误，出现404。

问题原因 #

使用GitHub免费域名时，网站部署在子路径/sax-deployment/下（比如username.github.io/sax-deployment/），所以vite.config.js中配置base: "/sax-deployment/"是正确的。但切换到自定义域名后，GitHub Pages会将网站部署在域名根路径下（比如yourdomain.com/），此时资源路径里的/sax-deployment/前缀就会变成无效路径，导致浏览器找不到/sax-deployment/assets/index-xxx.js这类资源（实际资源在/assets/下）。

解决步骤 #

1. 修改Vite配置
   打开vite.config.js，将base字段改为"/"或者直接删除该字段（Vite默认值就是"/"）：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     base: "/", // 或者直接去掉这一行
   })
   

2. 重新构建并部署
   执行构建命令重新生成静态文件：

   npm run build
   

   然后将新生成的dist文件夹内容重新提交并推送到GitHub仓库，触发GitHub Pages重新部署。

3. 验证CNAME文件
   检查GitHub仓库根目录下的CNAME文件，确保内容是你的自定义域名（比如yourdomain.com），不要包含任何路径前缀。

额外检查 #

• 打开浏览器控制台，查看资源请求的完整URL，确认是否还带有/sax-deployment/前缀。修改配置并重新部署后，请求路径应该变成/assets/index-xxx.js，即可正确加载资源。
• 确保DNS解析完全生效，可以通过nslookup yourdomain.com命令验证IP是否指向GitHub Pages的官方IP。

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