Nuxt中报:window or document is not defined 问题的解决办法

关于出现这类问题,一般有两种场景

  1. 引用第三方组件时,比如引用 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> 这种样式来使用这个组件
  1. 手写的在 window 对象上的操作。这种可以按照官方的方法:

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

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

/* eslint-disable */
if (process.client) {
  window.yourcode
}

猜你喜欢

转载自blog.csdn.net/zyf971020/article/details/129519565