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

事实证明我需要在mounted事件https://vuejs.org/v2/api/?#mounted

上注入我的jQuery插件

它也说

在服务器端呈现期间不会调用此挂接。

我刚刚将插件分配给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>

我不确定这是否是解决此问题的正确方法。我感谢对最佳做法的任何评论！

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

1 个答案: