vue项目通过puppeteer做SEO,可以使用Puppeteer在Vue项目中进行SEO,通过服务端渲染获取渲染后的HTML内容,以便搜索引擎爬虫能够正确地索引您的网页内容。
正在使用的项目 https://manefuwu.com/
下载vue-seo-puppeteer项目:https://github.com/lovelin0523/vue-seo-puppeteer
npm install
查看puppeteer缺失的库
ldd node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome
安装缺失的库 NOT FUND eg:
yum install libXtst.x86_64
或者 安装不了,未找到库可以使用这样的命令
yum install libgbm*
修改 app.js 中域名为自己项目的域名。
接下来配置Nginx
upstream spider_server {server localhost:3000;
}#在 location / 中添加if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {proxy_pass http://spider_server;
}
重启Nginx以后。在项目文件夹下运行项目
node app.js
这个时候可以用postman 模拟百度爬虫来检验一下是否能抓取成功, 设置
User-Agent:Mozilla/5.0 (compatible; Baiduspider/2.0;+http://www.baidu.com/search/spider.html)
输入解析后的HTML,大功告成!
然后很快就发现了一个问题,无论是用 nohup node app.js 还是 node app.js & 只要关闭了SSH窗口就会抓取失败了。通过百度谷歌一番找到了问题,需要用PM2来守护node进程。
npm install -g pm2
通过运行
pm2 -v
来验证安装是否成功,如果运行不成功需要做一下链接
ln -s /data/node-v12.4.0-linux-x64/bin/pm2 /usr/bin/pm2
用pm2来启动项目,有以下多种方式
pm2 start app.js
pm2 start app.js --name my-api #my-api为PM2进程名称
pm2 start app.js -i 0 #根据CPU核数启动进程个数
pm2 start app.js --watch #实时监控app.js的方式启动,当app.js文件有变动时,pm2会自动reload</pre>
关于pm2命令
pm2 list //查看进程
pm2 monit //监控
pm2 stop all //停止PM2列表中所有的进程
pm2 stop 0 //停止PM2列表中进程为0的进程
pm2 reload all //重载PM2列表中所有的进程
pm2 reload 0 //重载PM2列表中进程为0的进程
pm2 restart all //重启PM2列表中所有的进程
pm2 restart 0 //重启PM2列表中进程为0的进程
pm2 delete 0 //删除PM2列表中进程为0的进程
pm2 delete all //删除PM2列表中所有的进程
运行 pm2 start app.js。
断开SSH测试抓取,大功告成!
附 :
puppeteer官方文档
https://zhaoqize.github.io/puppeteer-api-zh_CN/#/
参考博客及项目
https://blog.csdn.net/qq_19734597/article/details/94556956
https://github.com/lovelin0523/vue-seo-puppeteer
vue项目通过puppeteer做SEO,可以使用Puppeteer在Vue项目中进行SEO,通过服务端渲染获取渲染后的HTML内容,以便搜索引擎爬虫能够正确地索引您的网页内容。相关推荐
- egg html模板,egg+vue服务端渲染模板项目介绍
egg-vue-webpack-boilerplate 基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目,包括前台系统(SSR MPA)和后台管理系统( ...
- vue服务端渲染 MySQL_Vue 服务端渲染(SSR)
什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...
- Vue 服务端渲染原理 拆分成三步个步骤简单的实现一个案例
前言 可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用 服务端渲染 搭建项目比较少,本文是记录我在学习 服务端渲染 过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...
- vue2-ssr从vue-cli搭建项目改造服务端渲染+打包上线部署
为了完成vue+ssr,本人呕心沥血翻阅很多博主的文档,并在b站看了很多视频之后,经过个人实践,终于整理出一套完整版,无缺失,不报错的改造流程(亲测!!) 从创建=>打包=>上线部署,详细 ...
- vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
几个月前,公司要求(服务端渲染)--用vue-ssr做了个服务端渲染,从起搭建.开发.部署.浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习.--几个月过去了,公司又 ...
- 服务端渲染(回答vue为啥子不支持seo优化,如何解决)
整体目标: 理解服务端渲染的概念 会用vue的SSR Nuxt中的async 一.基本概念 页面的两种生成方式 用户从浏览器地址栏中输入地址访问服务器上的页面时,服务器可以用两种不同的策略来生成这个页 ...
- Vue项目开发中优雅的切换服务端ip
Vue项目开发中优雅的切换服务端ip 在进行Vue开发的时候,需要配置项目对应服务端的ip地址,但如果需要在多个服务端间进行切换,通常的做法是:手动修改vue.config.js配置文件中的服务端ip ...
- vue服务端转html,普通vue-cli初始项目转为服务端渲染SSR
1.第一步没啥好说的,利用vue-cli脚手架创建一个demo项目: vue init webpack vue-ssr-demo cd vue-ssr-demo npm install 2.安装SSR ...
- 对vue服务端渲染的理解以及其使用场景
理解 本质上,服务端渲染其实是生成了应用程序的"快照",将vue及其对应的库运行在服务端,令其去访问接口去预加载数据,然后将获取到的数据作为组件的初始状态 首先拉取数据,此后,组件 ...
最新文章
- PyQt5 技术篇-QSpinBox选值框值改变触发事件实例演示,获取QSpinBox组件的值,选值框的边界值设置方法
- 如何用VC++新建一个项目
- 一颗强健的“心脏”,让海银的业务系统更高效、更安全!
- react项目启动invalid host header问题
- 什么是前端开发中的 mobile first 策略
- Linux mount: Structure needs cleaning 错误解决方法
- C# 截取图片的方法
- Oracle 创建表 练习题
- python 获取pv_Python爬虫入门教程 40-100 博客园Python相关40W博客抓取 scrapy
- 第十课 これは古い庭園です。
- ubuntu12.04 qtcreate支持中文输入
- 2022-01-12总结 CSS开篇
- 网络操作系统具有哪些特征?
- pythoncss50使用教程_Python学习(二十) —— 前端之CSS
- 下载instagram
- Spring Security Oauth2单点登录原理与技术
- 为什么保持代码整洁如此重要?
- 清理数据 python_使用python的数据清理技术
- Electron 创建任务栏图标以及任务栏图标右键菜单
- LeetCode每日一题--860. 柠檬水找零(贪心)
热门文章
- 华为mate10体验华为云电脑,意外实用,以后电脑要吃灰了
- 树莓派数据库mysql_树莓派搭建安装MySQL
- word打印成pdf图片显示不全
- 2021重庆江北中学高考成绩查询,重庆市江北中学高2021届学子高考百日誓师大会点燃青春梦想...
- Linux版本的JDK
- 开学壁纸已送达,请注意查收
- 快速搭建校园局域网课程点播+直播学习平台
- 常用的Python IDE工具
- iOS添加边缘手势( UIScreenEdgePanGestureRecognizer)实现侧滑效果
- 如何在组织中培养人才:5个关键步骤