Custom Dir for Prerender html files of Vue SPA

Question

Guess my turn to ask regarding prerender-spa-plugin in Vue App.

I wanted to assigned rendered routed page HTMLs from /dist folder into subfolders such as following format:

/dist/
 - index.html
 - /pages/
     - about.html
     - contact.html

As now, my about.html and contact.html are rendered at dist instead, together with index.html

My SPA prerender snippet for vue.config.js as below

pluginOptions: {
    prerenderSpa: {
      registry: undefined,
      renderRoutes: [
        '/',
        '/about'
        '/contact',
      ],
      useRenderEvent: true,
      headless: true,
      onlyProduction: true,
    },

So how i can achieve my rendering as format above? I kinda figure renderedRoute is something i need to deal with. Thank you in advance (_ _ ;)

Gabriel Willemann Gabriel Willemann · Accepted Answer · 2020-04-23T12:16:03

It's possible, but you change somethings.

First you need to change your routes in VueRouter. You must to declare your routes the follow way:

// ./src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';

Vue.use(VueRouter);

// IMPORANT HERE
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/pages/contact.html', name: 'contact', component: Contact },
  { path: '/pages/about.html', name: 'About', component: About },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

See that your routes must be declared with ".html" in your path.

Second you must to change your "vue.config.js":

//vue.config.js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),

        // IMPORTANT HERE
        routes: ['/', '/pages/about.html', '/pages/contact.html'],

        // IMPORTANT HERE
        postProcess(renderedRoute) {
          renderedRoute.route = renderedRoute.originalRoute;
          renderedRoute.html = renderedRoute.html.split(/>[\s]+</gim).join('><');
          if (renderedRoute.route.endsWith('.html')) {
            renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route);
          }
          return renderedRoute;
        },
      }),
    ],
  },
};

Again your routes must be declared with ".html" and you must apply custom postProcess method.

Ready.

Custom Dir for Prerender html files of Vue SPA

1 Answers