記一次由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就解決了上述問題？