LOGO

Nuxt.js 报错 window is not defined || document is not defined


Nuxt.js 报错 window is not defined || document is not defined

情况1: 自己的写的函数里包含window等

报错原因:因为Nuxt为服务器端渲染,所以在编译打包时会区分服务端渲染还是客户端渲染(浏览器),在vue文件中使用window对象报错的原因是,webpack将其加入了服务端脚本中,所以会报错。所以在使用时,应该判断当前代码环境是否是浏览器环境。

解决方案:

1.通过 process.client 判断

1
2
3
if (process.client) {
... // 这里就是操作window对象的代码
}

2.将涉及到window的写在 mounted 生命周期里

1
2
3
mounted() {
// window ...
}

3.使用 no-ssr 组件

1
2
3
4
5
6
7
8
9
<template>
<div>
<kafuuchino/>
<no-ssrplaceholder="Loading...">
<!-- 此组件仅在客户端呈现 -->
<comments/>
</no-ssr>
</div>
</template>

情况2: 第三方插件里包含window等

报错原因:还有一种就是项目里会引入很多第三方组件,这些组件里也有可能会包含window等一些服务端不支持的内容

解决方案:

1.将插件设置为客户端渲染
将 插件 文件路径配置到 nuxt.config.js 的 plugins 属性中,示例如下

1
2
3
4
5
6
7
8
9
module.exports = {
//其它配置项...
plugins: [
{
src: '~/plugins/kafuuchino',
ssr: false // 此处的 ssr:false 就是将其改为非服务器端渲染
}
],
}

修改完配置文件需要重新启动项目!


文章作者: 68HTML
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 68HTML !
  目录