1.问题
在使用vuepress构建文档时,出现了如下问题:
2.原因
这是因为vuepress build生成的静态文件都是通过node服务端渲染完成的。因此,当组件中不是在beforeMount
或者 mounted
钩子中访问浏览器 / DOM 的 API时,就会有问题。
3.解决方法
对Markdown文件(.md)中引入的组件,使用内置的 <ClientOnly>
组件包裹。
如:
<ClientOnly>
<NonSSRFriendlyComponent/>
</ClientOnly>
但上述方法并不能解决对于组件中引入第三方组件库就访问浏览器api的问题,可使用es6提供的import的按需加载的功能。在组件的mounted钩子中使用。
<script>
export default {
mounted () {
// 当该组件挂载后,才会加载引入的模块
import('./lib-that-access-window-on-import').then(module => {
// use code
})
}
}
</script>