预渲染实践小记

由于公司某些页面要做SEO优化(搜索和加载优化)，另外一些页面耦合很低的落地面分享面但又不想单独拆出去，之前也用ssr尝试过并不是十分友好，所以这次看了预渲染的介绍，发现在现vue项目上成本很并且非常的适合

特点

访问预渲染出来的页面在访问时与SSR一样快，并且它将服务端编译HTML的时机提前到了构建时，因此也降低了服务端的压力。不过SSR和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是简单的静态页面。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站，比如电商网站。

1. 基于vue-cli3
2. prerender-spa-plugin
3. puppeteer

文章是基于一个新项目，老项目只需要配置插件即可

vue create my-project
先创建一个项目，随便选一下就行

npm install prerender-spa-plugin --save-dev 安装插件

ps: 还需要puppeteer 才可以否则build会报错

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i puppeteer

插件配置

            new PrerenderSPAPlugin({
                // 生成文件的路径，也可以与webpakc打包的一致。
                // 下面这句话非常重要！！！
                // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                staticDir: path.join(__dirname,'dist'),
                // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                routes: ['/', '/product','/about'],
                // 这个很重要，如果没有配置这段，也不会进行预编译
                renderer: new Renderer({
                    inject: {
                    },
                    headless: false,
                    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                    renderAfterDocumentEvent: 'render-event'
                })
            }),

main 配置

  new Vue({
    el: '#app',
    render: h => h(App),
    mounted() { // 需要配置这个属性
        document.dispatchEvent(new Event('render-event'))
    }
  })

最后
这时候执行npm run build就可以生成刚刚配置在PrerenderSPAPlugin插件中routes中的页面html了，这过程中会一闪而过的短暂打开chromium浏览器，不用管。

ps router的mode 一定要是history模式