如何将Vitepress博客标题链接重定向至Vue个人网站主页

问题根源 #

你遇到的跳转后先显示404、刷新才正常的问题，核心原因是Vitepress内部的Vue Router跳转逻辑和主站SPA的路由上下文冲突：Vitepress部署在/blog/子路径，其Vue Router的base被设置为/blog/，如果用Vitepress默认的路由跳转方式（如router-link、router.push）指向/，实际会在Vitepress的路由范围内寻找对应路径，找不到就先显示Vitepress的404页面，直到浏览器刷新后才会请求主站根路径的资源。

解决方案 #

1. 改用原生<a>标签实现标题跳转 #

自定义Vitepress主题，将标题的跳转逻辑从内部路由改为原生链接，直接指向主站根路径：

• 在.vitepress/theme/index.js中覆盖默认主题的标题组件：

import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'

export default {
  ...DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      // 覆盖首页的标题跳转
      'home-title': () => h('a', { href: '/' }, 'My Blog'),
      // 覆盖内页的站点标题跳转
      'site-title': () => h('a', { href: '/' }, 'My Blog')
    })
  }
}

这种方式会触发浏览器的页面跳转，直接请求主站根路径，不会经过Vitepress的路由系统，避免404问题。

2. 修正服务器的SPA fallback配置 #

如果已经用了原生链接仍出现问题，需确保服务器能正确区分主站和博客的路径：

• 对于Netlify，在根目录创建_redirects文件，添加规则：

/*    /index.html   200
/blog/*    /blog/index.html   200

该规则会让根路径的所有请求返回主站的index.html，/blog/开头的请求返回Vitepress的index.html，确保两个SPA的路由都能正常工作。

3. 移除冲突配置 #

之前尝试的Vitepress rewrites、Vue Router重定向等配置可能会干扰跳转逻辑，建议先移除这些配置，再测试原生链接的跳转效果。

替代的主题化博客工具 #

如果不想继续折腾Vitepress的配置，这些工具更适合和Vue主站配合：

• VuePress 2：与Vitepress同源，配置更灵活，直接在导航配置中设置link: '/'即可实现跳转，无需复杂的主题自定义。
• Gridsome：Vue生态的静态站点生成器，对博客场景支持友好，配置pathPrefix为/blog/后，导航跳转可直接设置绝对路径，路由冲突概率低。
• Nuxt Content：若主站基于Nuxt，可直接集成该模块实现博客功能；若主站是普通Vue，单独部署Nuxt Content到/blog/路径，跳转逻辑更清晰。

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