·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
返回列表 发布新帖

vue项目不被百度收录怎么办?

380 0
发表于 2022-7-30 14:33:17 | 查看全部 阅读模式

马上注册,免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
项目上线了,突然收到说项目不利于百度蜘蛛爬取网页??半路接手项目当时就知道会有这么一个问题,预料之中、预料之中...

采用前后端分离模式,spa单页面应用,打包之后只有一个index.html页面,而且里面什么都没有不利于百度爬取。

那么解决呗。方案有如下:

1、vue.js官网提供SSR服务端渲染(详情见官网),由于项目已经上线使用,如果采用这种模式基本得重构项目,成本高等其他因素。

2、prerender-spa-plugin预渲染,相对较简单安装prerender-spa-plugin直接使用,打包后会生成对应自己的静态文件,可以提高网页访问速度。可以设置mate添加关键字、描述、标题,项目较大的话则不太友好。

3、使用Phantomjs针对爬虫做处理,Phantomjs是一个基于webkit内核的无头浏览器,没有UI界面,它就是一个浏览器,只是其内的点击、翻页等人为相关操作需要程序设计实现。

这种解决方案其实是一种旁路机制,原理就是通过Nginx配置, 判断访问的来源UA是否是爬虫访问,如果是则将搜索引擎的爬虫请求转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫。

线上要安装 node 、 pm2 、 phantomjs ,nginx相关配置。

部署需要node服务器支持;

爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;

如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,解决方法是判断访问的IP,是否是百度官方爬虫的IP。

综合项目情况采用了prerender-spa-plugin预渲染,改动较小安装直接使用(这里只做了首页的优化)

安装prerender-spa-plugin:

npm install prerender-spa-plugin --save
安装这个网络要稍微稳定好点,可能会安装失败,别灰心继续加油!

npm cache clean --force  // 如果失败清除缓存 再来
装好之后在webpack.prod.conf.js或者vue.config.js中增加配置:

const PrerenderSPAPlugin = require('prerender-spa-plugin');const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;configureWebpack: config => {   if (process.env.NODE_ENV !== 'production') return;   return {          plugins: [                new PrerenderSPAPlugin({                     staticDir: path.join(__dirname, './dist'),                    routes: ['/','/home'], // 需要预渲染的路由                     renderer: new Renderer({                         inject: {                            foo: "bar"                         },                         headless: false,                         renderAfterDocumentEvent: 'render-event'                      })               })          ]        }    }
staticDir里面的dist是输出文件夹名字

routes配置的是你想实现预渲染的路由(可以多个 根据需要)

renderer预渲染提供了三种时机实现,renderAfterDocumentEvent、renderAfterTime、renderAfterElementExists

然后再main.js中修改

new Vue({ router, store, render: function (h) {      return h(App) }, mounted () {//新增        document.dispatchEvent(new Event('render-event'))  }}).$mount('#app');
最后打包出来的文件会根据所配置的路由生成对应的独立文件夹。

注意路由需要采用mode: 'history'模式,不然不能生效。

总之项目开发初期就应该考虑到各种因素而来确定使用什么技术,是否有解决方案。
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点
创宇盾启航版免费网站防御网站加速服务
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:3.22.70.210,GMT+8, 2024-11-17 19:47 , Processed in 0.271263 second(s), 79 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表