vue通过prerender-spa-plugin实现预渲染

vue通过prerender-spa-plugin实现预渲染

话不多说,直接上代码

1. 安装

npm install --save prerender-spa-plugin@3.4.0

这个安装的时候可能会报错, 可以用cnpm安装
2. webpack.prod.conf.js

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer


new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, '../dist'),
      //这里录入需要预渲染的路由, vue-router一定要改为history模式
      routes: [ '/', '/quickCalcManager','/lgsbsManager','/surveyManager','/policysManager','/companyManager' ],

      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: true,
        // renderAfterDocumentEvent: 'render-event'
      })
    })

3. main.js

mounted() {
    document.dispatchEvent(new Event('custom-render-trigger'))
}

最后直接npm run build 打包

这里有一个坑, 直接这样部署到服务器以后页面会找不到css和js文件
修改config/index.js

assetsPublicPath: '../'

以上就是关于prerender-spa-plugin实现vue预渲染的全部内容了