商务服务
Vue项目进行Seo优化
2024-12-16 15:31

前言

大家都知道本项目是由vue写的,由于vue是单页面的,所以对于seo优化来讲并不是很友好,蜘蛛只能抓取首页,但是呢,虽然流量没有多少,但我们的seo还是要做一做的,毕竟有seo才能吸引到更多的用户访问。

Vue项目进行Seo优化

说说几种方案吧
  • 网上比较多的是使用Nuxt.js,但是用我已经开发好的项目来改,说实话,前端小白的我实在是改不动了。
  • Quasar不太了解,不过多介绍了。
  • Vite SSR,Vite 提供了内置的Vue 服务端渲染支持。也要改已有代码,不想改,不会改。

官方给的方案被我否定了,就是想找个不用修改已有代码的方法。经过不懈的百度努力,发现了一线生机Puppeteer,简单说说这个吧

Puppeteer

Puppeteer 是一个 Node.js 库,它提供了一个高级 API 来通过开发工具协议控制 Chrome/Chromium。 Puppeteer 默认以无头模式运行,但可以配置为在完整 (“有头”) Chrome/Chromium 中运行。

Puppeteer的作用,我主要用到的是SSR

  • 生成页面的屏幕截图和 PDF。
  • 抓取 SPA(单页应用)并生成预渲染内容(即 “SSR”(服务器端渲染)。
  • 自动化表单提交、UI 测试、键盘输入等。
  • 使用最新的 Javascript 和浏览器功能创建自动化测试环境。
  • 捕获站点的时间线痕迹以帮助诊断性能问题。
  • 测试 Chrome 扩展程序。
SEO实现-使用Puppeteer进行SSR

搭建用到的工具

  • node
  • npm
  • puppeteer
  • express
  • html-minifier
  • google-chrome
  • nginx
1. 安装Node.js和npm

已经安装过node.js的机器忽略这部分即可,可以通过node -v查看

  1. 进入node安装目录
 
  1. 下载安装包
 
  1. 解压安装包
 

4.设置软连接,建立快捷命令

  • /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory
 
  • /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory
 
  • /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object file: No such file or directory
 
  • /node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory
 
  • /home/work/node_modules/puppeteer/.local-chromium/linux-856583/chrome-linux/chrome: error while loading shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory
 
4. 配置Nginx
  1. docker 或直接安装nginx
    如果使用的是docker或直接安装的nginx,则在配置文件添加如下代码
 
  1. 宝塔部署的nginx
    选择你的主页网站,点设置进入在选择伪静态,在里面添上如下代码
 
测试

通过以上步骤后,我们就可以来测试一下了,使用apipost来测试

    以上就是本篇文章【Vue项目进行Seo优化】的全部内容了,欢迎阅览 ! 文章地址:http://fabua.ksxb.net/news/4490.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 海之东岸资讯移动站 http://fabua.ksxb.net/mobile/ , 查看更多   
最新文章
PICO启动“全民优化师”活动,征集VR游戏性能优化方案
创作期截至4月16日,评选期则是4月22日至5月9日(映维网Nweon 2025年03月31日)PICO正在举行名为“全民优化师”的活动,邀请你
TOSHIBA代理商东芝手机「TOSHIBA代理商」
TOSHIBA东芝半导体公司,在国际市场上盛名远扬,家喻户晓。在日本之外,东芝拥有100多家子公司和协作公司的庞大全球网络,仅海外
互传手机互传换机助手手机互传「互传手机互传换机助手」
互传手机互传换机助手,一般又称互传换机助手app。互传换机助手app是一款很受网友好评的手机换机工具。可以实现手机之间数据批量
噬心工具箱手机工具箱「噬心工具箱」
噬心工具箱这是一款方便好用的手机工具箱应用,用户可以使用软件轻松处理图片,超多使用功能,让用户生活更方便。噬心工具箱app
儋州清明假期旅游迎来热潮,民俗体验趣味十足
南海网4月6日消息(记者赵航)花落日渐暖,风起正清明,今年清明假期,踏青赏花趣味十足。4月5日,“福暖春日,泉享安康”温泉美
【教程】全民K歌,用手机唱卡拉OK,朋友一起听!手机k歌「【教程】全民K歌,用手机唱卡拉OK,朋友一起听!」
用手机软件来唱卡拉OK,我知道的有两个软件推荐给您,全民K歌和唱吧。两个软件功能都很强,以前年轻人似乎用唱吧的多一些,现在
繁荣“入境游”,“游”出“日常感”是关键
原标题:繁荣“入境游”,“游”出“日常感”是关键年初至今,我国入境游市场持续复苏,到清明节期间迎来小高峰。数据显示,清明
苹果iPhone14和13对比区别是什么 苹果美版值得买吗?手机壳多少钱「苹果iPhone14和13对比区别是什么 苹果美版值得买吗?」
处理器、屏幕、摄像头、内存等不同处理器相同:iPhone14的处理器没有变化,还是iPhone13 Pro上的满血版A15 仿生芯片,只有iPhone
两个人在线观看免费完整版日本手机在线播放「两个人在线观看免费完整版日本」
格式“武神主宰08集”是武神一部出色的武侠古装影片,充斥着大量精彩的主宰空手道、木棉三绝和剑术招式的武神视觉盛宴。它是主宰
北京:“以花为媒”培育新消费
  4月的北京,繁花似锦装点千年古都,满城春色中涌动着勃勃生机。  北京玉渊潭公园樱花绽放,吸引游客慕名赏花;元大都城垣