правильная настройка prerender-spa-plugin - PullRequest
Новая
       21

правильная настройка prerender-spa-plugin

0 голосов
/ 14 ноября 2018

Я пытаюсь настроить prerender-spa-plugin для своего приложения.
Необходимо настроить для нескольких страниц.

Я делаю, как в документации (Vue.js 2 Router)

Я добавил необходимые параметры в файл webpack.prod.config.js 

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

const webpackConfig = merge(baseWebpackConfig, {

...

  plugins: [

        // == PRERENDER SPA PLUGIN == //
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, '../dist'),
            routes: ['/', '/test'],

            renderer: new Renderer({
                inject: {
                    foo: 'bar'
                },
                headless: false,
                renderAfterDocumentEvent: 'render-event'
            })
        }),
...

Также в файле main.js

new Vue({
  el: '#app',
  router,
    render: h => h(App),
    mounted () {
        // You'll need this for renderAfterDocumentEvent.
        document.dispatchEvent(new Event('render-event'))
    }
})

Теперь о главномпроблема.В корне (/) проекта работает предварительный рендеринг.Если вы перейдете на страницу /test, то в исходном коде (ctrl + u) будет показан код из корня сайта (/).

Я не могу найти содержимое из /test в любомспособ.

Скажите, что я делаю не так, и как решить проблему.

Спасибо!

UPD: rout.js 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/test',
            name: 'test',
            component: test
        }
    ]
})
...