title: How to pre-render multiple Vue app pages?
body: <p>I'm trying (unsuccessfully) to pre-render the HTML of multiple Vue apps within the same project scaffolded with Vue CLI. I do not want to use Vue Router or Nuxt etc for multiple reasons. </p>
  
  <p>I've tried using <a href="https://github.com/chrisvfritz/prerender-spa-plugin" rel="nofollow noreferrer">prerender-spa-plugin</a>, but since I don't use routes, it only pre-renders the index.</p>
  
  <p>My vue.config.js looks like this:</p>
  
  <pre><code>const path = require('path');
  const PrerenderSPAPlugin = require('prerender-spa-plugin');
  
  const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  
  module.exports = {
    pages: {
      index: 'src/index.js',
      about: 'src/about.js',
    },
    configureWebpack: {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/'],
  
          postProcess(route) {
            route.html = route.html.replace('&lt;/script&gt;&lt;div&gt;', '&lt;/script&gt;&lt;div id="app" data-server-rendered="true"&gt;');
  
            return route;
          },
  
          renderer: new Renderer({
            headless: true,
            renderAfterDocumentEvent: 'render-event',
          }),
        }),
      ],
    },
  };
  </code></pre>
  
  <p>and my index.js and about.js essentially look like this:</p>
  
  <pre><code>import Vue from 'vue';
  import App from './Index.vue';
  
  new Vue({
    render: h =&gt; h(App),
    mounted() {
      document.dispatchEvent(new Event('render-event'));
    },
  }).$mount('#app');
  </code></pre>
  
  <p>I also have unique public/ index.html and about.html pages.</p>
  
  <p>The <code>routes</code> parameter of prerender-spa-plugin doesn't seem to recognise things like <code>'/about.html'</code>. Is there an easy way of achieving multiple pre-rendered pages?</p>
  
  <p>Do I have to wrestle with the SSR module?</p>
  
  <p>Thanks in advance.</p>