Javascript 使用jQuery插件的VueJS 2服务器端渲染

我正在尝试将一个有几个jQuery插件的旧登录页转换为Vue应用程序。原因是，登录页正在扩展，将成为一个web应用程序

用作模板。主要原因是它执行服务器端渲染

问题是错误：

ReferenceError: window is not defined
    at Object.<anonymous> (__vue_ssr_bundle__:3398:2408)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:1280:126)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:2099:3)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:1380:81)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:378:66)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)

这是

LandingView.vue

<template>
  <div class="landing-page">
  </div>
</template>

<script>
  import owl from '../../public/assets/libs/owl.carousel.2.0.0-beta.2.4/owl.carousel.min.js'
  import $ from 'jquery';

  export default {
    name: 'landing-view',
    created () {
      console.log('hello world!');
    }
  }
</script>

从“../../public/assets/libs/owl.carousel.2.0.0-beta.2.4/owl.carousel.min.js”导入owl
从“jquery”导入美元；
导出默认值{
名称：“着陆视图”，
创建（）{
log（'helloworld！'）；
}
}

事实证明，我需要在

挂载的事件中插入jQuery插件

它还说

服务器端渲染期间不调用此挂钩

我刚刚将插件分配到
窗口
，然后我就可以启动它了

<template>
  <div class="landing-page">
  </div>
</template>

<script>
  // import $ from 'jquery'; //no need to import it, as it's provided by webpack

  export default {
    name: 'landing-view',
    mounted() {
      // created() is only available in v1

      window.owl = require('../../public/assets/libs/owl.carousel.2.0.0-beta.2.4/owl.carousel.min.js');


      // the rest of my code
      $('.some-carousel').owlCarousel();

    }
  }
</script>


//从“jquery”导入美元//无需导入，因为它是由webpack提供的
导出默认值{
名称：“着陆视图”，
安装的（）{
//created（）仅在v1中可用
window.owl=require（'../../public/assets/libs/owl.carousel.2.0.0-beta.2.4/owl.carousel.min.js'）；
//我剩下的代码
$（'.some carousel'）.owlCarousel（）；
}
}


我不确定这是否是解决这个问题的正确方法。我感谢您对最佳实践的任何评论

<template>
  <div class="landing-page">
  </div>
</template>

<script>
  // import $ from 'jquery'; //no need to import it, as it's provided by webpack

  export default {
    name: 'landing-view',
    mounted() {
      // created() is only available in v1

      window.owl = require('../../public/assets/libs/owl.carousel.2.0.0-beta.2.4/owl.carousel.min.js');


      // the rest of my code
      $('.some-carousel').owlCarousel();

    }
  }
</script>