前言：

最近帮助公司更新官网，我们公司为了加快首页加载速度采用了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