记一次由swiper引发的“血案”

就在我认真工作的某一天，测试同学提了一个bug，说是ie edge下的某个页面详情打不开，遂检查之，锁定是swiper版本问题后，由原来的swiper4换成了swiper3，解决这个问题后窃喜之中，鬼使神差的点了下刷新，于是：

以为是眼瞎的我再次点击刷新后：

顿时一脸懵逼中。。。

（ps: 项目使用的是nuxt）

此时的swiper在改详情页的引入方式为如下：

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

搜寻资料后了解到 图1中的 window is not defined 原因是 引入的插件swiper中使用了window变量，但是由于nuxt.js会在服务端渲染页面，而服务端并没有window，所以报错，如何解决这个问题呢，查阅nuxt官方文档后得知：
1.nuxt的第三方插件的引入方式需要在/plugins 文件中新建一个js，将swiper引入

// /plugins/vue-swiper.js文件

import Vue from 'vue'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default () => {
    Vue.use(Swiper)
}

2.在nuxt.config.js中的plugins再次引入,注意此处的ssr为false，如此服务端渲染时就不会渲染这个组件，就不会window is not defined的错了。

plugins:[{src: '@/plugins/vue-swiper.js',ssr: false}]

正当我再次窃喜之际，按照以上运行之后：

并且页面上的数据都加载不出来了。
再度懵逼中。。。

找不到属性nodeType？？？

（一段时间过后）

仍旧不知道如何解决该问题，就在一筹莫展之时，一篇文档出现在了我的面前，连接：https://blog.csdn.net/dexing0...

文中提到了几种第三方插件的方法，其中有一种引入方式使用不是上文中1的import引入方式，而是require：

// /plugins/vue-swiper.js文件

require('swiper')

最后不仅swiper能加载了，而且刷新还不报错了

第一次在思否写文章，文中有错误的地方还请小伙伴们指正，并且向小伙伴们请教一下：

1. 为何会出现找不到属性nodeType的报错？
2. 为何使用require就解决了上述问题？