遇到的问题:

近来在写个人博客的时候遇到了大家可能都会遇到的问题

Vue单页面在SEO时显得很无力，尤其是百度不会抓取动态脚本

Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充

Vue单页面又是大势所趋，写起来也不止是一个爽，当然也可以选择多页面

但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面

SSR当然能解决这个问题，但是仔细想想SSR不就跟以前的.php页面一样了么

都是预先拉取所有数据然后填充返回给浏览器，需要多消耗服务器资源，而且配置繁琐

当然预渲染也不能解决这个问题

那么问题来了，我只是想让百度抓取下我的动态文章，但是配置个繁琐的SSR并不是最好选择

Vue SSR带你五步学会Vue SSR

我的解决办法:

既然只是想让百度抓取下我的动态文章，其实就是让蜘蛛抓取我的静态页面时候，html的meta标签是已经填充好的

那么就很简单了，我们只需要实现一个极其简单的阉割版的SSR不就好了么

PS：我百度了很久没有找到相关的文章，不知道是不是我百度的姿势不对

在不使用ssr的情况下解决Vue单页面SEO问题的更多相关文章

  1. 解决vue单页面应用做微信JSSDK注入权限时出现“invalid signature”（ios端）

    --都说微信开发多坑,没想到遇到一个天坑. 在做一个vue项目时,要用到微信JS-SDK,官方文档详见:https://developers.weixin.qq.com/doc/offiaccount ...

  2. nginx配置解决vue单页面打包文件大，首次加载慢的问题

    cnpm run build 文件过大,其中主要是vender.js有1.5M,代码部署到服务器,首次访问加载页面时比较慢,耗时6.5s左右,所以需要优化下. 1.Nginx开启gzip 找到ngin ...

  3. m_Orchestrate learning system---九、在无法保证是否有图片的情况下，如何保证页面格式

    m_Orchestrate learning system---九.在无法保证是否有图片的情况下,如何保证页面格式 一.总结 一句话总结:都配上默认缩略图就可以解决了 1.如何获取页面get方式传过来 ...

  4. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  5. fullpage在vue单页面当中使用会出现的问题以及解决办法

    在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...

  6. Nginx 解决WebApi跨域二次请求以及Vue单页面问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...

  7. 解决 Vue 刷新页面后 store 数据丢失的问题

    原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } },   ...

  8. 调用支付宝接口Android客户端没有支付宝APP的情况下解决无法调用支付宝页面的问题

    这几天一直研究支付宝接口调用,因为当前应用中需要调用支付宝接口作移动支付. 遇到一个问题困扰几天,就是当我们的手机端未安装支付宝APP的时候,需要在自己应用中调用支付宝的登陆网页进行支付.我是Andr ...

  9. JQuery如何在验证表单失败的情况下阻止表单提交

    自定义验证时,使用了return false和event.preventDefault(),但是验证失败之后表单还是提交了 这个问题我也碰到了,尝试了多次也没有用,在调试的时候也发现确实return了 ...

随机推荐

  1. android 显示目录下图片

    知识点 1. 网格视图 2. 读取文件 MainAcitvity package com.test.gridview; import android.support.v7.app.AppCompatA ...

  2. selenium之webdriverAPI接口详解

    1. 浏览器操作 driver.maximize_window() #最大化窗口driver.execute_script('window.scrollTo(0,0);') #滚动窗口到最上面driv ...

  3. python正则表达式提取中文

    import urllib.requestimport reurl='https://songsearch.kugou.com/song_search_v2?callback=jQuery112407 ...

  4. Android中ProgressBar显示小数的方法

    Android原生的ProgressBar的ProgressDialog.STYLE_HORIZONTAL(即水平样式)默认setMax和setProgress只能传int型的参数,而实际项目中我需要 ...

  5. 生产环境中使用脚本实现tomcat start|status|stop|restart

    一.在实际生产环境中tomcat启动是在bin目录下采用自带脚本startup.sh启动:使用shutdown.sh关闭.如下图: 再如果对于新手来讲在不知道路径情况下重启是一件头痛的事情(注意没有r ...

  6. 组件的 render 方法

    React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件.我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(还有别的 ...

  7. Docker 容器镜像操作

    1.停止所有的container,这样才能够删除其中的images:docker stop $(docker ps -a -q)如果想要删除所有container的话再加一个指令: docker rm ...

  8. re正则表达式2

    1.“字符*” 匹配*前面的字符0次或者多次. 注意:是匹配*前一个字符,只能是*前一个字符多次打印出来.*前面其他的字符相当于前缀会打印出来,但是不会再匹配. *前一个字符前面的其他字符里的首字符先 ...

  9. PMP项目管理学习笔记（7）——整合管理之指导和管理项目执行过程

    过程剖析 输入:组织过程资产.企业环境要素.项目管理计划.批准的变更请求 工具:专家判断.项目管理信息系统 输出:工作绩效信息.可交付成果.变更请求.项目文档和计划更新 指导和管理项目执行过程包括: ...

  10. 【HEVC帧间预测论文】P1.1 基于运动特征的HEVC快速帧间预测算法

    基于运动特征的 HEVC 快速帧间预测算法/Fast Inter-Frame Prediction Algorithm for HEVC Based on Motion Features <HE ...