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 判断

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

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

mounted() {
	// window ...
}

3.使用 no-ssr 组件

<template>
    <div>
        <kafuuchino/>
        <no-ssrplaceholder="Loading...">
            <!-- 此组件仅在客户端呈现 -->
            <comments/>
        </no-ssr>
    </div>
</template>

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

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

解决方案:

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

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

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

参考文章
nuxtjs在vue组件中使用window对象编译报错的解决方法