Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung

npm installiere Prerender-Spa-Plugin --Speichern

const Pfad = require('Pfad')
const PrerenderSPAPlugin = require('prerender-spa-plugin') // Plugin importieren const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

Plugins:[
	// PrerenderSPAPlugin konfigurieren
    neues PrerenderSPAPlugin({
      // Der Pfad der generierten Datei kann auch mit dem von webpakc gepackten Pfad übereinstimmen.
      staticDir: Pfad.join(__dirname, '../dist'),
      
      // Entsprechend Ihrer eigenen Routing-Datei. Wenn beispielsweise der Index Parameter hat, müssen Sie ihn als /index/param1 schreiben.
      Routen: ['/', '/report','/genius','/index/param1'],
      // Muss geschrieben werden, wenn dieser Abschnitt nicht konfiguriert ist, wird keine Vorkompilierung durchgeführtrenderer: new Renderer({
          injizieren: {
            foo: "Leiste"
          },
          kopflos: falsch,
          // In main.js, document.dispatchEvent(new Event('render-event')), sollten die Ereignisnamen der beiden übereinstimmen.
          renderAfterDocumentEvent: 'Renderereignis'
      })
    })
]

neuer Vue({
  el: '#pingce',
  Router,
  speichern,
  Komponenten: { App },
  Vorlage: '<App/>',
  // Mounted hinzufügen, sonst wird die Vorkompilierung nicht ausgeführt mounted () {
    document.dispatchEvent(neues Ereignis('Render-Ereignis'))
  }
})

npm installiere Prerender-Spa-Plugin --Speichern

const PrerenderSPAPlugin = require('prerender-spa-plugin'); // Plugin importieren const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('Pfad');
modul.exporte = {
    konfigurierenWebpack: config => {
        wenn (Prozess.env.NODE_ENV !== 'Produktion') zurückgeben;
        zurückkehren {
            Plugins: [
                neues PrerenderSPAPlugin({
                    // Der Pfad der generierten Datei kann auch mit dem von webpakc gepackten Pfad übereinstimmen.
                    // Dieses Verzeichnis kann nur eine Ebene haben. Wenn die Verzeichnisebene größer als eine Ebene ist, wird während der Generierung keine Fehlermeldung angezeigt und es bleibt einfach beim Vorrendern hängen.
                    staticDir: Pfad.join(__dirname,'dist'),
                    // Entsprechend Ihrer eigenen Routing-Datei. Wenn beispielsweise „about“ Parameter hat, müssen Sie es als „/about/param1“ schreiben.
                    Routen: ['/', '/Produkt', '/Über'],
                    //Muss konfiguriert werden, sonst wird keine Vorkompilierung durchgeführtrenderer: new Renderer({
                        injizieren: {
                            foo: "Leiste"
                        },
                        kopflos: falsch,
                        // In main.js, document.dispatchEvent(new Event('render-event')), sollten die Ereignisnamen der beiden übereinstimmen.
                        renderAfterDocumentEvent: 'Renderereignis'
                    })
                }),
            ],
        };
    }
}

neuer Vue({
  Router,
  speichern,
  rendern: h => h(App),
  // Der Name von renderAfterDocumentEvent in vue-config.js: 'render-event' muss mit mounted () { übereinstimmen.
    document.dispatchEvent(neues Ereignis('Render-Ereignis'))
  }
}).$mount('#app')