VueJS 2使用jQuery插件進行服務器端渲染

我試圖將具有幾個jQuery插件的舊着陸頁轉換爲Vue應用程序。原因是，目標網頁正在擴展並將成爲一個網絡應用程序。VueJS 2使用jQuery插件進行服務器端渲染

使用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造成節點不是。但是，我不知道如何使它可用，或者如何在服務器端呈現頁面後注入jQuery。

vue-hackernews-2.0幾乎沒有變化。我做的主要改變是在webpack.client.config.js上添加了jQuery。

這被添加到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>

來源

2017-02-23 keligijus

原來我需要注入我的jQuery插件mounted事件https://vuejs.org/v2/api/?#mounted

它也說

This hook is not called during server-side rendering.

我剛剛將插件分配給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>

我不知道這是否是解決這個正確的方法。我很欣賞對最佳做法的評論！

來源

2017-02-23 10:30:28 keligijus

VueJS 2使用jQuery插件進行服務器端渲染

回答

相關問題