Vue Router+GitHub Pages自定义域名路由链接404问题求助

Hey，我懂你遇到的这个头疼问题——用了Vue Router的History模式，页面内点击跳转完全正常，但直接访问子路由或者刷新页面就跳404，再加上自定义域名的复杂性，确实容易卡壳。我来给你拆解下核心原因和落地的解决方案：

问题根源 #

GitHub Pages是静态文件托管服务，当你直接访问myname.com/contact时，服务器会默认去找contact这个文件或目录，但咱们的单页应用所有路由逻辑都在index.html里处理，服务器找不到对应文件就返回404了。

解决方案步骤 #

1. 确认Vue项目基础配置（规避基础坑） #

检查vue.config.js

你当前的publicPath: '/'是完全正确的，因为自定义域名是根域名访问，不用修改。如果担心环境差异，可以明确写上：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}

确认Router配置

你的路由配置里base: process.env.BASE_URL没问题，因为package.json里的homepage设为https://myname.com/，BASE_URL会被自动解析为/。也可以直接写死测试：

export default new VueRouter({
  base: '/',
  mode: 'history',
  routes: [
    // 你的home、contact、projects路由配置
  ]
})

2. 配置GitHub Pages的重定向规则（关键！） #

GitHub Pages本身不支持服务器端URL重写，但咱们可以用404.html做客户端兜底重定向：

在public目录下新建404.html

这个文件的作用是，当服务器返回404时，自动把用户重定向到index.html并保留原路由信息，让Vue Router能正确解析：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Your Site</title>
    <script>
      // 把当前URL的路径、查询参数、哈希都带到index.html
      const fullPath = window.location.pathname + window.location.search + window.location.hash;
      window.location.replace('/index.html' + fullPath);
    </script>
  </head>
  <body></body>
</html>

备选方案：CDN层面配置重写（体验更流畅）

如果你用Cloudflare这类CDN托管自定义域名，可以直接在CDN的页面规则里设置：

• 匹配规则：myname.com/*
• 转发设置：转发到myname.com/index.html，状态码选200（不是301重定向）
  这样服务器层面就直接把所有请求导向index.html，不会有404跳转的延迟感。

3. 确认GitHub Pages自定义域名配置 #

• 去仓库的Settings > Pages里，确认自定义域名已经设为myname.com，并且开启了Enforce HTTPS（如果你的域名支持）。
• 确保仓库根目录有CNAME文件，内容就是myname.com——这个文件会在你设置自定义域名时自动生成，也可以手动在public目录下创建，打包后会自动复制到dist目录。

4. 重新打包部署 #

执行npm run build，把dist目录下的所有文件推送到GitHub Pages的分支（默认是gh-pages分支）。

为什么那个React示例能正常工作？ #

那个React项目大概率用了类似的客户端兜底方案，或者在CDN/服务器端配置了重写规则——本质上都是让所有路由请求都指向入口HTML文件，让前端路由自己处理跳转逻辑。

调试小技巧 #

• 部署后打开浏览器控制台，检查静态资源是否都从myname.com/加载，有没有路径错误。
• 直接访问myname.com/contact，看控制台的跳转逻辑是否正常，Vue Router有没有正确渲染对应页面。

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