vue-cli2.0预渲染

服务端渲染VS预渲染

1.服务端渲染：将完整的 html 输出到客户端，又被认为是‘同构’或‘通用’
       点：首次渲染快（无需等待所有js都完成下载）利于SEO，节能
       缺点：开发受限
         需要处于Node.js server运行环境；
         更多的服务器负载（占用更大的CPU资源）
2.预渲染：对特定路由生成静态HTML文件，前端作为一个完全静态的站点
     无需使用web服务器实时动态编译HTML
     改善少数页面的SEO,可采用预渲染
     若网站有成百上千条路线，预编译会非常缓慢（此情况慎用）

预渲染

必须是history模式哦

1.核心插件

npm install prerender-spa-plugin --save-dev

2.在build/webpack.prod.conf.js中进行配置

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
plugins: [
   new PrerenderSPAPlugin({
        //生成文件的路径，这个目录只能有一级。
    staticDir: path.join(__dirname, '../dist'),
    //必需，要渲染的路由文件。
    routes: ['/', '/index'],
    //必须，要使用的实际渲染器，没有则不能预编译
    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        //等待渲染，直到检测到指定元素。
        //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
        renderAfterDocumentEvent: 'render-event',
        headless: false //渲染时显示浏览器窗口。对调试很有用。  
    })
   })
]

3.main.js中进行配置

new Vue({
    el: '#app',
    router,
    store,
    components: {
        App
    },
    template: '<App/>',
    mounted() {
        document.dispatchEvent(new Event('render-event'));
    }
})

4.打包cnpm run build，搭建node本地服务跑起来或者 在线上（后台需要重定向）
5.上图

配置前

配置后

完美结束，这个提高了SEO！

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。