在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题:
近来在写个人博客的时候遇到了大家可能都会遇到的问题
Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本
Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充
Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面
但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面
SSR当然能解决这个问题,但是仔细想想SSR不就跟以前的.php页面一样了么
都是预先拉取所有数据然后填充返回给浏览器,需要多消耗服务器资源,而且配置繁琐
当然预渲染也不能解决这个问题
那么问题来了,我只是想让百度抓取下我的动态文章,但是配置个繁琐的SSR并不是最好选择
Vue SSR带你五步学会Vue SSR
我的解决办法:
既然只是想让百度抓取下我的动态文章,其实就是让蜘蛛抓取我的静态页面时候,html的meta标签是已经填充好的
那么就很简单了,我们只需要实现一个极其简单的阉割版的SSR不就好了么
PS:我百度了很久没有找到相关的文章,不知道是不是我百度的姿势不对
在不使用ssr的情况下解决Vue单页面SEO问题的更多相关文章
- 解决vue单页面应用做微信JSSDK注入权限时出现“invalid signature”(ios端)
--都说微信开发多坑,没想到遇到一个天坑. 在做一个vue项目时,要用到微信JS-SDK,官方文档详见:https://developers.weixin.qq.com/doc/offiaccount ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
cnpm run build 文件过大,其中主要是vender.js有1.5M,代码部署到服务器,首次访问加载页面时比较慢,耗时6.5s左右,所以需要优化下. 1.Nginx开启gzip 找到ngin ...
- m_Orchestrate learning system---九、在无法保证是否有图片的情况下,如何保证页面格式
m_Orchestrate learning system---九.在无法保证是否有图片的情况下,如何保证页面格式 一.总结 一句话总结:都配上默认缩略图就可以解决了 1.如何获取页面get方式传过来 ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- fullpage在vue单页面当中使用会出现的问题以及解决办法
在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...
- 解决 Vue 刷新页面后 store 数据丢失的问题
原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, ...
- 调用支付宝接口Android客户端没有支付宝APP的情况下解决无法调用支付宝页面的问题
这几天一直研究支付宝接口调用,因为当前应用中需要调用支付宝接口作移动支付. 遇到一个问题困扰几天,就是当我们的手机端未安装支付宝APP的时候,需要在自己应用中调用支付宝的登陆网页进行支付.我是Andr ...
- JQuery如何在验证表单失败的情况下阻止表单提交
自定义验证时,使用了return false和event.preventDefault(),但是验证失败之后表单还是提交了 这个问题我也碰到了,尝试了多次也没有用,在调试的时候也发现确实return了 ...
随机推荐
- bzoj 3109: [cqoi2013]新数独【dfs】
按3x3的小块dfs,填数的时候直接满足所有条件即可 #include<iostream> #include<cstdio> #include<cstring> u ...
- CentOS服务器下安装配置SSL
https是一个安全的访问方式,数据在传输过程中是加密的,https基于SSL. 一.安装apache和ssl模块 1.安装apache #yum install httpd 2.安装ssl模块 #y ...
- C++构造函数与析构函数的解析
创建一个对象时,常常需要作某些初始化的工作,例如对数据成员赋初值. 注意,类的数据成员是不能在声明类时初始化的.如果一个类中所有的成员都是公用的,则可以在定义对象时对数据成员进行初始化.如: clas ...
- 在input标签里只能输入数字
<input type='text' onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,''); ...
- (办公)定时任务quartz入门
1.简单入门. 2.定时任务注入service. 入门案例: 1.1. 加jar <dependency> <groupId>org.quartz-scheduler</ ...
- AJPFX关于Timer类的学习
* Timer类:计时器public class Demo1 { public static void main(String[] args) throws InterruptedException ...
- 最新版kubernetesV1.14.1集群一键自动部署脚本
部署命令如下:详情及注意事项请看README.md git clone https://github.com/luckman666/deploy_Kubernetes-v1.14.1.git cd d ...
- pandas DataFrame 警告(SettingWithCopyWarning)
转自:https://www.cnblogs.com/pig-fly/p/7875472.html 刚接触python不久,编程也是三脚猫,所以对常用的这几个工具还没有一个好的使用习惯,毕竟程序语言是 ...
- Android利用已有控件实现自定义控件
Android控件的基本介绍及使用自定义控件的意义 Android 本身提供了很多控件,自定义控件在android中被广泛运用,自定义控件给了我们很大的方便.比如说,一个视图为imag ...
- TFS2010升级至TFS2013完全指南(更换服务器)
一.背景: 公司已使用tfs2010很长时间,目前随着公司的发展,项目越来越少,而产品越来越多,采用的开发模式,也逐渐从瀑布式.迭代式转向敏捷开发.为了更好的支持产品研发,决定将tfs ...