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
网友评论