阅读 41

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')
}
// 亲测,根本没卵用好不
复制代码

现在请跟上我的节奏, 在你的.vue文件中要在window上操作的代码外面包裹一层判断

/* eslint-disable */
if (process.client) {
	window.yourcode
}
/* eslint-enable */
// 亲测完美解决🎉🎉🎉
复制代码
关注下面的标签,发现更多相似文章
评论