vue ReferenceError: window is not defined

Karon_
  • 1.1k

今天想用swiper做一个banner,但是我导入之后就爆了这个错,代码如下:

npm:

npm install swiper --save

vue:

<template>
    <div class="slide">
        slide
    </div>
</template>

<script>
require('swiper')
</script>

结果:

ReferenceError: window is not defined
    at __vue_ssr_bundle__:10787:22
    at __vue_ssr_bundle__:10789:11
    at Object.<anonymous> (__vue_ssr_bundle__:11626:3)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:2668:1)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.__vue_styles__ (__vue_ssr_bundle__:4463:19)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:3618:79)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)

想问下大家有没有碰过这个问题,怎么解决的?
官网上跟vue有关的swiper好像都会有这个问题,只要涉及window和document。。

回复
阅读 13.4k
5 个回答

猜测应该是使用了服务器渲染的原因,建议可以从这个角度进行排查

heroDHB
  • 1
新手上路,请多包涵

应该是一楼说的这个原因,可以做一下判断 process.browser && require('swiper')

我目前也遇到,出现的情况是服务端渲染。至于原因是由于在服务端渲染中有几个周期函数会执行。之前在 created周期函数中对 window是否定义判断了

created(){
  if(typeof window!=="undefined"){
    //do something
  }
}

原本意图是通过判断window是否定义来执行逻辑,但是不行 还是会报错,最后修改执行的周期函数,在服务渲染中不会执行的周期函数中来执行逻辑,这样就避免了这个问题。 希望有帮助

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏