预渲染prerender-spa-plugin

1.安装prerender-spa-plugin，vue-meta-info

npm install prerender-spa-plugin vue-meta-info --save

2.在你的项目目录下找到该文件 build/webpack.prod.conf.js，添加如下代码

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

// 预渲染

     new PrerenderSPAPlugin({

      // 生成文件的路径，也可以与webpakc打包的一致。

      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。

      staticDir: path.join(__dirname, '../dist'),

      // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。

      routes: ['/', '/about', '/order', '/school', '/news', '/product','/newDetail/num','/store'],

      // 这个很重要，如果没有配置这段，也不会进行预编译

      renderer: new Renderer({

        inject: {

          foo: 'bar'

        },

        headless: false,

        renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。

        args: ['--no-sandbox', '--disable-setuid-sandbox']

      })

    })

3.在main.js中添加

new Vue({

  el: '#app',

  router,  

  template: '',

  components: { App },

  mounted () {

    document.dispatchEvent(new Event('render-event'))

  }

})

[ 注意：router中必须设置 mode: “history”。]

打包出来可以看见文件，打包出文件夹/index.html

优势：

       改动小，引入个插件就完事；

不足：

       无法使用动态路由；只适用少量页面的项目，页面多达几百个的情况下，打包会很很很慢；