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 не будучи в узле. Тем не менее, я не знаю, как сделать его доступным или как я должен добавить 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 на 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> 

---

Я не уверен, что это правильный способ решить эту проблему. Я ценю любые комментарии по лучшим практикам!