MPA 模式

MPA（多页应用程序）模式可以通过 vitepress build --mpa 启用，或通过 mpa: true 配置选项启用。

在 MPA 模式下，所有页面默认渲染时不包含 JavaScript。因此，生产站点可能具有更好的初始访问性能，并且更适合 SEO。

但是，由于没有 SPA 导航，页面间的链接将导致完整的页面重新加载。MPA 模式下的导航感觉不会像 SPA 模式那样即时。

另请注意，没有 JavaScript 意味着你无法使用纯客户端 Vue 功能，如动态 DOM 操作或过渡效果。但是，如果需要，你可以选择性地通过 <script client:load> 加载 JavaScript。

在 MPA 中使用客户端脚本

当使用 <script client:load> 时，该脚本标签将：

从最终输出中删除 client:load 属性
仅在页面完全加载后在客户端执行

vue

<script client:load>
document.querySelector('#click-me').addEventListener('click', () => {
  alert('Hello!')
})
</script>

<button id="click-me">Click me!</button>

你可以使用此功能有条件地加载功能，例如注册 service worker：

vue

<script client:load>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
}
</script>

配置

要在配置中启用 MPA 模式：

// .vitepress/config.js
export default {
  mpa: true
}

或者，你可以仅为生产构建启用它：

// .vitepress/config.js
export default {
  mpa: process.env.NODE_ENV === 'production'
}

已知限制

`useData()`

在 MPA 模式下，由于没有客户端 JavaScript，useData() 的反应性将不起作用。数据仍然可以访问，但不会对更改做出反应。

Vue 组件中的反应性

由于页面在没有 JavaScript 的情况下渲染，任何用户交互都需要通过 <script client:load> 显式加载。

使用 `<ClientOnly>`

<ClientOnly> 在 MPA 模式下不起作用，因为没有客户端激活阶段。

配置侧边栏

由于 MPA 不包含 Vue 反应性，动态侧边栏无法根据当前页面突出显示活动状态。

MPA 模式 ​

在 MPA 中使用客户端脚本 ​

配置 ​

已知限制 ​

useData() ​

Vue 组件中的反应性 ​

使用 <ClientOnly> ​

配置侧边栏 ​