记录vue预渲染prerender-spa-plugin踏坑

1.安装

   命令：cnpm install prerender-spa-plugin -D  //避免报错，会自动下载文件等待

 2.找到build下的webpack.prod.conf.js

    头部添加

         const PrerenderSPAPlugin = require('prerender-spa-plugin') //引用插件

          const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

    

plugins: [

    // 配置PrerenderSPAPlugin预渲染

       new PrerenderSPAPlugin({

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

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

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

      routes: ['/','/about'],

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

      renderer: new Renderer({

         // inject:{

           // foo:'bar'

        // },

       // 触发渲染的时间，用于获取数据后再保存渲染结果

       renderAfterTime: 5000,

           headless: false,

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

          renderAfterDocumentEvent: 'render-event'

       })

   }),

]

在main.js中

   new Vue({

        el: '#app',

        render: h => h(App),

        mounted () {

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

        }

   })

//在HtmlWebpackPlugin中添加chunks: ['manifest', 'vendor', 'app'],      //防止报错webpackJsonp is not defined

new HtmlWebpackPlugin({

    filename: config.build.index,

    template: 'index.html',

    inject: true,

    minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeAttributeQuotes: true

        // more options:

      // https://github.com/kangax/html-minifier#options-quick-reference

    },

      // necessary to consistently work with multiple chunks via CommonsChunkPlugin

     chunks: ['manifest', 'vendor', 'app'],

      chunksSortMode: 'dependency'

}),

//路由中mode:'history',

//刷新首屏闪现问题

百度方案（测试暂无效果）

  根目录的index.html中添加display：none；

  

  app.vue中中修改为block

  

  

//百度商桥重复加载出现两次的问题

在打包后生产的html中删除生成的那一份商桥代码，放到服务器会自动生成新一份

 

参考各大博主，

记录问题