前言：

最近幫助公司更新官網，我們公司為了加快首頁加載速度采用了Nuxt框架，但是官網首頁需要一個輪播圖，但是安裝之后，運行項目就開始報錯：window is not defined，后來查閱了資找到了報錯的原因以及解決方式，在這里分享給各位小伙伴：

原因：

Nuxt框架采用服務端渲染，服務端是沒有window對象的，但是swiper在初始化的時候需要調用window對象的方法，它去找一個還不存在對象的方法，就會報：window is not defined的錯誤

解決方案：

在需要引入swiper的文件中的mounted鉤子中判斷當前是不是客戶端環境，如果是客戶端環境就引入swiper：(注：在nuxt2框架使用swiper需要安裝并導入vue-awesome-swiper)

安裝命令：

npm?install?swiper@4.5.1 vue-awesome-swiper@4.1.1 --save

代碼如下：

 mounted() {// 在客戶端環境下初始化Swiperif (process.client) {this.isClient = true;const VueAwesomeSwiper = require("vue-awesome-swiper");require("swiper/css/swiper.css");Vue.use(VueAwesomeSwiper);}},

補充：為什么要使用require而不是用import呢，import是在編譯時執行，require則是在運行時執行，由于使用nuxt2框架在編譯階段是沒有window對象的，所以要在編譯之后，運行階段再導入swiper