A
A
Alexander Florenko2018-11-14 19:31:24
Vue.js
Alexander Florenko, 2018-11-14 19:31:24

How to setup prerender-spa-plugin + vue?

I am trying to set up the prerender-spa plugin for my application.
Must be configured for multiple pages.
I do as in the documentation (Vue.js 2 Router)
I added the necessary parameters for the filewebpack.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'
            })
        }),
...

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

And now about the main problem. The root (/) of the project is pre-rendered. If you go to the /test page, then in the source code (ctrl + u) the code from the site root (/) will be displayed. I can't get the content out of /test. Please tell me what I am doing wrong and how to solve the problem. Thank you! App.vue
<div id="app" data-server-rendered="true">

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Florenko, 2018-11-15
@SkipTyler

Solved the problem.
Actually there was no problem)
I launched the assembled version with the help serve
Didn't work.
And it worked withhttp-server

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question