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

Question

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

使用https://github.com/vuejs/vue-hackernews-2.0/作为模板。主要原因是它可以进行服务器端呈现。

问题在于错误：

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)

到目前为止，我发现问题是由window不在Node引起的。但是，我不知道如何使它可用，也不知道在服务器端呈现页面之后应该如何注入jQuery。

vue-hackernews-2.0几乎没有变化。我所做的主要改变是将jQuery添加到webpack.client.config.js中。

这是添加到plugins中的(找到了另一个答案，当应用程序需要时，它应该使jQuery可用)：

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery',
  jQuery: 'jquery'
})

这是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>

Answer 1

结果，我需要在jQuery事件https://v2.vuejs.org/v2/api/?#mounted上注入我的mounted插件。

它还说

在服务器端呈现过程中不调用此钩子。

我只是把插件分配给window，然后我就可以启动它了。

<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>

我不知道这是否解决这个问题的适当办法。我感谢您对最佳实践的任何评论！