Nuxt中关于window or document is not defined的问题总结

关于这类问题通常有两种场景

• 引用第三方组价时，好比引用 vue-awesome-swiper 这种的第三方组件时，由于源组件代码中包含有操做window对象，因此这一类的window is not defined按照官方的使用插件的方法引入就能够解决

// 如今plugins目录下新建文件vue-awesome-swiper.js
// 这里就以vue-awesome-swiper这个组件为例
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

export default () => {
    Vue.use(VueAwesomeSwiper)
}
// 而后在nuxt.config.js文件的css和plugins中添加如下代码
css: [
    ...
    { src: 'swiper/dist/css/swiper.css' },
    ...
],
plugins: [
    ...    
      { src: '~/plugins/vue-awesome-swiper', ssr: false }，
      ...
],
// 这样的话就至关于全局引入了这个组件，在你的.vue文件中就能够直接使用
// <div class="swiper-wrapper"></div>这种样式来使用这个组件

• 手写的在window对象上的操做。这种的能够按照官方的方法

  // 在你的.vue文件中加入
  if (process.client) {
   require('external_library') // 这里的意思就是写你在window对象上的操做，能够翻译为下面这段代码
  }

就是说在你的.vue文件中要在window上操做的代码外包裹一层if (process.client)判断

/* eslint-disable */
if (process.client) {
    window.yourcode
}
/* eslint-enable */
// 亲测完美解决🎉🎉🎉