Need SEO but don’t want to move the entire project to server rendering

Quick and easy to implement: prerender-spa-plugin

  • Specific configuration of VUE project:
  1. Add dependencies package.json
"prerender-spa-plugin":"^ 3.4.0"
Copy the code
  1. Configure the vue. Config. Js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const vueConfig = {
  configureWebpack: {
    // webpack plugins
    plugins: [
      // Plug-in configuration
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/'.'/heaEvaRes'].// Pre-rendered page routing is required
        renderer: new Renderer({
          // inject: {
          // foo: 'bar' optional - any value that can be accessed through 'window.injectProperty'.
          // },
          headless: true.// Whether to open the browser window for real-time preview debugging during prerendering
          renderAfterDocumentEvent: 'render-event' //*** Prerender event hook name})})]},... }module.exports = vueConfig;
Copy the code
  1. Prerender is called in the entry function
new Vue({
  router,
  store,
  render: (h) = > h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event')) // execute the dog function in the Webpack configuration
  }
}).$mount("#app");
Copy the code

  • Pay attention to the point

    Pre-rendering is the process from the start to the end of the page, so there can be no conditional page hops or the resulting pre-rendered page may not be the desired one

The framework supported by the plug-in is quite complete, you can refer to the documentation, detailed configuration