解决在nuxt2框架中引入swiper报错：window is not defined

原创于 2025-07-20 14:43:54 发布 · 220 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前言：

最近帮助公司更新官网，我们公司为了加快首页加载速度采用了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() {
        // 在客户端环境下初始化Swiper
        if (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