马上注册，免费下载更多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'模式，不然不能生效。
总之项目开发初期就应该考虑到各种因素而来确定使用什么技术，是否有解决方案。
©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！
| 
matomo站点流量统计 商业版 1.0(zhi200_mat118 人气#Discuz!插件模板![仿化龙巷app手机版 V2 UTF8+GBK(mac_hualongxiang)[支持X3.5 X3.4]](https://static.dz-x.net/block/ef/ef2a9e9be9a2eb0586ea731bee2693fe.jpg)
仿化龙巷app手机版 V2 UTF8+GBK(mac_hualon98 人气#Discuz!插件模板
与dz-x.net同款首页聊天室3.5.0最新汉化版19 人气#Discuz!插件模板
黑名单好友帖子限制 正式版_1.3(nciaer_bla101 人气#Discuz!插件模板![城市门户|生活论坛 X3.5正式版 2.1(rtj1009_008)[X3.5模板]](https://static.dz-x.net/block/0d/0da71f35d493698cc0d4076ecc06b08a.jpg)
城市门户|生活论坛 X3.5正式版 2.1(rtj1009101 人气#Discuz!插件模板
与dz-x.net同款首页聊天室最新汉化版本！！1697 人气#Discuz!插件模板
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
