import{_ as t,c as n,j as i,a,G as p,ag as l,B as h,o as d}from"./chunks/framework.C1C4sYC0.js";const _=JSON.parse('{"title":"MPA 模式","description":"","frontmatter":{},"headers":[],"relativePath":"zh/guide/mpa-mode.md","filePath":"zh/guide/mpa-mode.md","lastUpdated":1719410492000}'),k={name:"zh/guide/mpa-mode.md"},r={id:"mpa-mode",tabindex:"-1"};function E(o,s,c,g,m,y){const e=h("Badge");return d(),n("div",null,[i("h1",r,[s[0]||(s[0]=a("MPA 模式 ")),p(e,{type:"warning",text:"experimental"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#mpa-mode","aria-label":'Permalink to "MPA 模式 {#mpa-mode}"'},"",-1))]),s[3]||(s[3]=l(`

可以通过命令行输入 vitepress build --mpa 或在配置文件中指定 mpa: true 配置选项来启用 MPA (Multi-Page Application) 模式。

在 MPA 模式下，所有页面都默认不会包含任何 JavaScript。因此，站点也许可以在评估工具中获得更好的初始访问性能分数。

但是，由于缺少 SPA 路由，在 MPA 模式下切换页面时会重新加载整个页面，而不会像 SPA 模式那样立即响应。

同时请注意，默认情况下不使用 JavaScript 意味着你实际上只是将 Vue 作为服务器端模板语言。浏览器不会附加任何事件处理程序，因此将不会有任何交互性。要加载客户端 JavaScript，需要使用特殊的 <script client> 标签：

html

<script client>
document.querySelector('h1').addEventListener('click', () => {
  console.log('client side JavaScript!')
})
</script>

# Hello

<script client> 是 VitePress 独有的功能，而不是 Vue 的功能。它可以在 .md 和 .vue 文件中使用，但只能在 MPA 模式下使用。所有主题组件中的客户端脚本将被打包在一起，而特定页面的客户端脚本将会分开处理。

请注意，<script client> 不会被视为 Vue 组件代码，它只是普通的 JavaScript 模块。因此，只有在站点需要极少的客户端交互时，才应该使用 MPA 模式。

`,7))])}const F=t(k,[["render",E]]);export{_ as __pageData,F as default};