vue预渲染处理的坑

⭐步骤：

    1.安装    prerender-spa-plugin

    命令为：npm install prerender-spa-plugin -D

    2.把router里的mode模式改成history

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

3.在头上写

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

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

4.在plugins里面添加

new PrerenderSPAPlugin({

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

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

      // 对应自己的路由文件（数组形式哦！）

      routes: [ '/', '/app', '/PackageOffer', '/proAllnetShow' ],

      // 若没有这段则不会进行预编译

      renderer: new Renderer({

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

        // renderAfterTime: 10000,

        inject: {

          foo: 'bar'

        },

        headless: false,

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

        renderAfterDocumentEvent: 'render-event'

      })

    }),

5.在config下的index.js中    assetsPublicPath:'/'(这样样式会不见)

没点 

有点

6.执行npm run build

ps:    ™可是我还是遇到了报错

请注意红框

百度发现是没有puppeteer  微笑脸哦！  

速速安装了npm install puppeteer 

嗯哼  重新build    ok    （但是发现哦，出来的index.html里面的东西不能点击，嗯，下次再说这个问题）