Comment effectuer un pré-rendu de plusieurs pages d'applications Vue ?

Question

J'essaie (sans succès) de pré-rendre le HTML de plusieurs applications Vue au sein d'un même projet scaffoldé avec Vue CLI. Je ne veux pas utiliser Vue Router ou Nuxt etc. pour de multiples raisons.

J'ai essayé d'utiliser prerender-spa-plugin mais comme je n'utilise pas d'itinéraires, il ne fait que prérenseigner l'index.

Mon fichier vue.config.js ressemble à ceci :

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('</script><div>', '</script><div id="app" data-server-rendered="true">');

          return route;
        },

        renderer: new Renderer({
          headless: true,
          renderAfterDocumentEvent: 'render-event',
        }),
      }),
    ],
  },
};

et mes fichiers index.js et about.js ressemblent essentiellement à ceci :

import Vue from 'vue';
import App from './Index.vue';

new Vue({
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  },
}).$mount('#app');

J'ai également des pages uniques publiques/ index.html et about.html.

En routes de prerender-spa-plugin ne semble pas reconnaître les éléments tels que '/about.html' . Existe-t-il un moyen simple d'obtenir plusieurs pages pré-rendues ?

Dois-je me battre avec le module SSR ?

Merci d'avance.

Answer 1

La solution que j'ai trouvée consiste à appeler new PrerenderSPAPlugin plusieurs fois, une pour chaque itinéraire.

Answer 2

Je suis également confronté au même problème, j'ai un html statique qui utilise un composant vue et je veux pré-rendre le composant vue dans le répertoire de construction de sortie. J'utilise le package laravel-mix pour le processus de construction. Pourriez-vous afficher la solution complète pour cela, c'est-à-dire appeler le nouveau PrerenderSPAPlugin plusieurs fois, un pour chaque route.

Si je peux obtenir le webpack.config.js complet, il serait facile pour moi de comprendre et d'implémenter la même chose en utilisant laravel-mix.