CODEWITHSUNDEEP
webpackvue.jssingle-page-applicationprerender
Totomobile
Totomobile

Reputation: 663

Vue Pre-render SPA - Root overwrites template file

The problem is if you add "/" to the routes to pre-render, then refreshing on a page which is not "/", causes the browser to use the pre-rendered index file contents.

How can Vue and PSPA be configured such that the root is pre-rendered, and yet Vue knows to use the original (empty) index.html file for rendering non-prerendered routes?

I tried to add an index.template file in /public, and then add this to the PSPA config:

indexPath: path.join(__dirname, 'dist', 'index.template.html'),

But this fails to build. Is this the right way to do it?

Upvotes: 0

Views: 2223

Answers (2)

Justin
Justin

Reputation: 3634

According to the documentation at https://github.com/SolarLiner/vue-cli-plugin-prerender-spa#backend-routing-configuration-for-deployments, you should simply point prerendered routes to index.html and non-prerendered routes to app.html in your server configuration.

Upvotes: 0

Totomobile
Totomobile

Reputation: 663

I will provide a general solution. This solution may also help people who are experiencing the 'white-flash' on load using the prerender-spa plugin, documented here: https://github.com/chrisvfritz/prerender-spa-plugin/issues/193

The steps to fix the problem are:

  1. Tell the Pre-SPA plugin not to use index.html as its template file. 

     indexPath: path.join(__dirname, 'dist', 'app.html')

  1. Tell Vue (CLI 3) to provide this file to Pre-SPA:

chainWebpack: config => {
  if (process.env.NODE_ENV !== 'production') return
    config
      .plugin('html')
      .tap(args => {
        args[0].template =  path.join(__dirname, 'public', 'index.html');
        args[0].filename =  'app.html';
          return args
        })
      }

  1. Configure your web server to use a different entry point for root ("/") than for all other paths. Since I am using firebase, I have added this to firebase.json:

  "rewrites": [
    {
      "source": "**",
      "destination": "/app.html"
    },
    {
      "source": "/",
      "destination": "/index.html"
    }
  ]

After building, your /dist folder you will have an app.html file and an index.html file.

The app.html file is used anytime someone refreshes a page on your site which has NOT been pre-rendered. The app.html file should be 'clean' and contain no pre-rendered information.

The index.html file is used only on the root landing, and has all the pre-rendered content in it.

Upvotes: 1

Related Questions