初见nuxt之 error: window or document is not defined

643 阅读1分钟

分两种情况

  • 直接编写在代码中,解决方案:
if (process.client) { 
require('external_library') // 这里就是操作window对象的代码 
}
  • 引用第三方插件等,第三方源代码有调用window对象,解决方案: 按照官方的使用插件的方法引入就可以解决 搬运自这篇博客
// 这里就以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>这种样式来使用这个组件