Nuxt.js项目报错window is not defined解决方法

Nuxt.js项目中使用了vue-messages第三方组件,引入过后页面报错window is not defined,如何解决这个问题?

步骤回顾(安装&配置)

 yarn add vue-messages

plugins目录下放该组件装载文件vue-messages.js,内容如下:

import Vue from 'vue'
import VueMessage from 'vue-messages'

Vue.use(VueMessage)

vue-messages.js文件路径配置到nuxt.config.jsplugins属性中,示例如下:

module.exports = {
 //其它配置项...
plugins: [
    { src: '~/plugins/vue-messages' }
  ],
 //其它配置项...
}

以上就是组件的安装和配置步骤。这几步过后就出现了window is not defined问题。

解决办法

分析:由于Nuxt是在服务端做的页面渲染,我们引入的很多第三方组件需要用到window对象,而window是浏览器对象,是要依赖浏览器的,所以在做服务端渲染时会遇到window is not defined问题。

遇到这种问题我们如何解决呢?
还好Nuxt提供了解决办法,那就是在plugins配置第三方组件的时候加上ssr: false属性即可,示例如下:

module.exports = {
 //其它配置项...
plugins: [
    { src: '~/plugins/vue-messages' ,ssr: false }
  ],
 //其它配置项...
}

ssr设置为false就是告诉引擎该组件只在客户端引入,不做服务端渲染。

相关资源

vue-message 官方地址
ssr属性官方文档说明

the end