vue如何实现预渲染教程

互联网信息 4月前 7

vue是一个单页面的应用,这导致一些爬虫和百度无法搜索到。如果你想针对你应用的其中某些页面进行SEO优化,让他们可以被爬虫和百度搜索到,你可以进行预渲染操作,无需使用web服务器实时动态编译html,只需要在构建的时候简单的生成针对特定路由的静态html文件。优点是设置预渲染更简单,并可以将你得前端作为一个完全静态的站点。

1.先创建一个简单的vue网站,

首页home    ->     关于页面about   ->    我的页面my

运行后可以看到,首页的网络请求只有一个<div id='app'></div>,没有相应的文字和组件,这对seo非常不友好。



2. 然后我们要对某些页面进行SEO的优化。

(1)首先要把router的mode改成history,

(2)安装预渲染的插件:npm install prerender-spa-plugin -D

(3)跟着官网的操作,在生产环境下webpack.prod.conf.js内部引入渲染器

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

const Renderer =PrerenderSPAPlugin.PuppeteerRenderer

(4)在plugins中new插件进行一些相关的配置

new PrerenderSPAPlugin({

//你存放的静态资源目录

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

//你需要对哪几个路由进行SEO,数组形式,可以多个路由

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

//预编译的重要配置

    renderer:new Renderer({

inject: {

foo:'far'

        },

headless:false,

//非常重要,文档事件渲染后调用的事件名,在项目的入口中使用

        renderAfterDocumentEvent:'render-event'

    })

})


(5)在main.js中配置mounted

mounted() {

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

}

Event内的名字就是你在前面声明的名字。


(6)重新执行打包 npm run build

会发现dist目录已经不一样了。多了个about文件夹


运行项目后可以看到


已经有了相关的组件显示出来了,这就对SEO优化的预渲染




本文代码:https://github.com/czl0325/vue-prerender-demo


上一篇:【焦点访谈】自媒体, 原创的大神们真心不累!
下一篇:2019-04-11SEO软件分享几个推广网站有效的方法
最新回复 (0)
返回
发新帖