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 */
// 親測完美解決🎉🎉🎉
複製代碼