目的
由于基于 vue 的 SPA 项目普通的爬虫无法爬取项目的静态文本的内容, 通过预渲染插件
prerender-spa-plugin
解决 vue 的 SPA 项目的 SEO 问题
可以看到项目编译后的 index.html 中只有一些 HTML 和 js,CSS 文件的引用, 而无关于内容的静态文本当然你也可以添加 meta 的 keyword 和 descrption, 去简答的描述一些关于网站的内容
- curl xxxx.com
- // 返回的结果发现只有简单的 HTML 和 js 引用, 无相关的静态文本
使用过程
Vue 预渲染插件
Prerender-spa-plugin
GitHub 地址
能够解决的问题
- SEO
- Slow Client
- OpenGraph/Social Metadata
不能解决
User-specific content
不同的用户看都会不同的页面, 这种类型的页面不适用预渲染
Frequently changing Content
对于一些经常发生变化的页面, 如体育比赛等, 会导致编译后的数据不是实时更新的
Thousands of routers
不适用与路由太多的页面, 会导致构建 build 的过程, 等待的时间是超长
实现
主要通过 webpack 插件的方式, 控制编译出来的静态文件的方式
npm install prerender-spa-plugin@2.1.0 --save
Webpack 简单配置
- // webpack.conf.js
- var path = require('path')
- var PrerenderSpaPlugin = require('prerender-spa-plugin')
- module.exports = {
- // ...
- plugins: [
- new PrerenderSpaPlugin(
- // Absolute path to compiled SPA
- path.join(__dirname, '../dist'),
- // List of routes to prerender
- [ '/', '/about', '/contact' ]
- )
- ]
- }
打包完成后,你会发现原来的 dist 目录下, 多出来 about,contact 这样的目录, 这个目录下会有对应的 index.html 文件; 这份文件是对应路由生产后的静态页面, 便于 SEO
- curl xxxx.com
- // 会发现会讲渲染后的页面返回, 而不是刚开始的之后简单的 js 引用的初始页面
如果需要配置路由的访问, 还需要配置 Apache 或 Nginx 等访问, 匹配相应的路由访问导指定目录下 index.html 文件, 即可
- // 配置完成后, 可以查看效果, 每个页面返回的都是编译后的静态文件
- curl xxxx.com/about
- curl xxx.com/contact
遇到的几个问题:
项目中使用的版本为 2.1.0 版本,@3.0.0 版本的没有安装成功, 在安装过程中会卡住, 导致一直下载不下来, 如果直接终止的话, 会导致后续在 build 的过程中会报错
如果没有对应路由或者拼写错误的话,build 也会报错
webpack 中配置的 route 需要与 router 一直, 注意 /符号
需要注意 Apache 等配置, 如果访问 static 的静态文件, 都是统一访问到 dist/static / 目录下的, 而不是 dist/about/static 这种
来源: https://juejin.im/post/5ab8b01af265da2392365717