背景
因为之前的网站是使用Vue开发的,SPA对于搜索引擎来说非常的不友好,没有办法抓取到有效的信息。
有些人可能会选择使用像是SSR服务器渲染、Nuxt 静态化、使用Phantomjs针对爬虫做处理等,这确实是个解决办法,但对于小型项目来说更好的做法是使用 Prerendering 方式,过程也相对简单。此篇将介绍如何使用prerender-spa-plugin 将我们的SPA 添加预渲染。
此文仅记录首次为
Vue
项目增加SEO
优化过程,使用过程中若存在疑难杂症及解决方案,会及时补充进来,若你们在使用过程中遇到了什么问题,也可以来探讨来解决!
原理
prerender-spa-plugin 是Vue 核心团队成员开发出的预渲染插件,其内部利用了 Puppeteer 的爬取页面的功能。在Webpack 构建的最后阶段爬取指定路由的内容,之后再将这些内容实际渲染成独立的 HTML 文件,并建立路由对应的目录,这边我们不需要下载 puppeteer,因为我们项目采用的是vue cli脚手架,此为相依套件。
一些博客说需要安装 Chrome 浏览器,我一直在用 Chrome,故未验证!
Puppeteer是什么
Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行"有头"模式,具有如下功能:
- 生成页面 PDF。
- 抓取 SPA(单页应用)并生成预渲染内容(即"SSR"(服务器端渲染))。
- 自动提交表单,进行 UI 测试,键盘输入等。
- 创建一个时时更新的自动化测试环境。使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
- 捕获网站的 timeline trace,用来帮助分析性能问题。
- 测试浏览器扩展。
安装
js
npm i -D prerender-spa-plugin
# yarn add prerender-spa-plugin
配置
在vue.config.js中配置webpack信息
js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
configureWebpack 为 function
js
configureWebpack: config => {
config.plugins.push(
new PrerenderSPAPlugin({
// 必备 预渲染生成文件的目录应该和项目打包的生产路径一致
staticDir: path.join(__dirname, "dist"),
// 与当前项目路由保持一致
routes: ['/', '/home']
renderer: new Renderer({
inject: {
foo: "bar",
},
// 当设置为false时,可以看到渲染时调用的浏览器,在调试页面时非常有用
headless: true,
// 可选 - 当 document 触发以下事件时才开始渲染页面,使用vue组件时建议配置
renderAfterDocumentEvent: "render-event",
}),
}),
)
}
chainWebpack 链式
js
chainWebpack: config => {
if (process.env.NODE_ENV == "production") {
config.plugin("PrerenderSPAPlugin").use('prerender-spa-plugin', [
{
// 必备 预渲染生成文件的目录应该和项目打包的生产路径一致
staticDir: path.join(__dirname, "dist"),
// 与当前项目路由保持一致
routes: ['/', '/home']
renderer: new Renderer({
// 默认挂在 window.__PRERENDER_INJECTED 对象上,可以通过
// window.__PRERENDER_INJECTED.foo 在预渲染页面取值
inject: {
foo: "bar",
},
// 当设置为false时,可以看到渲染时调用的浏览器,在调试页面时非常有用
headless: true,
// 可选 - 当 document 触发以下事件时才开始渲染页面,使用vue组件时建议配置
renderAfterDocumentEvent: "render-event",
}),
}])
}
},
修改入口文件
配置了 renderAfterDocumentEvent: 'render-event'
时,vue组件需要在入口main文件进行相应的修改
javascript
new Vue({
el: '#app',
mounted() {
// 通知 prerender-spa-plugin 可以渲染了
document.dispatchEvent(new Event('render-event'));
}
});
路由模式
我们需要将路由模式修改为 mode: history
模式。
js
new VueRouter({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: routes
})
构建
js
$ npm run build
# yarn build
执行构建命令后,我们可以看到多出了 home
文件夹。在使用 /home
访问关于页面时,展示的就是 home
文件夹下的 index.html
页面了。
结合使用 vue-meta-info 使用更佳
Vue-Meta-Info 是一个能在vue2中使用的插件,能在vue文件中动态更改当前页面或者组件的meta中的信息(例如title,description,keyworld等)。
安装
js
npm i vue-meta-info --save
# yarn add vue-meta-info -D
使用
在 main.js
文件中引入 vue-meta-info
js
import MetaInfo from 'vue-meta-info
Vue.use(MetaInfo)
静态使用
在 Vue 组件中使用:
js
export default {
name: "Home",
metaInfo: {
title: "this is my web",
meta: [
{ name: "keyWords", content: "prerendering" },
{ name: "description", content: "good,prerendering" }
],
},
}
动态使用
js
export default {
name: 'Home',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'store'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'index'
}, 2000)
}
}
结尾
在Vue的奇妙世界里,SEO不再是一个可望而不可即的目标。通过预渲染插件的巧妙运用,我们成功地将SEO优化融入到了Vue项目中。希望这篇文章为你提供了洞察力,让你的应用在搜索引擎中获得更好的曝光,用户的点击。未来,愿你的Vue项目在浏览器中绽放光芒!