使用插件 Vue.js 时出现错误“未定义窗口”

Question

刚学vue。从此处为该站点安装滑块插件：https://github.com/surmon-china/vue-awesome-swiper。转移代码并收到这样的错误：'window is not defined' 下面的代码。我使用 nuxt.js。网上有几种解决方案，但没有一个对我有帮助。

slider.vue

<script>
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper';

  if (process.browser) {
    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
    Vue.use(VueAwesomeSwiper)
  }

  export default {
    components: {
    swiper,
    swiperSlide
  },
    data() {
      return {
        swiperOption: {
          slidesPerView: 'auto',
          centeredSlides: true,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    }
  }
</script>

vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper,{});

nuxt.config.js

module.exports = {
    /*
    ** Headers of the page
    */
    head: {
        title: 'stud-cit',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: 'Stud-cit site' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },

    loading: { color: 'blue'},
    plugins: [
        '~/plugins/vuetify',
        '~/plugins/vue-awesome-swiper' ,
        '~/plugins/vuePose'
    ],
    build: {
        vendor :['vue-awesome-swiper/dist/ssr'],
        extend (config, { isDev, isClient }) {
            if (isDev && isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                });
            }

        }
    }
};

Answer 1

这个库有特殊的 SSR 构建。 Reference

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)