---恢复内容开始--- 一.前言 1.简介预渲染                     2.案例演示(不配置预渲染)                     3.配置预渲染, 二.主要内容 1.简介预渲染 SPA有很多优点,但是对搜索引擎SEO不友好,目前主要有两种方式来解决这个问题: 服务端渲染,预渲染 就像官网所说,如果你只需要改善少数页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 HTML (服务端渲染,…

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T 声明: 以下配置只保留有必要的 生成目录这里使用base代替,请自行修改 vue-cli模板使用webpack,其他模板类推 webApp - 在线预览 Github - 配置了预渲染的demo 1. 简介与使用场景 我们知道SPA有很多优点,…

项目用的是vue,spa,用这个很简单,但是头疼的是重要的seo优化.第一反应是服务器端渲染,但是个人搞了半天后感觉有点难,在项目时间有限的情况下,只能寻找另外的方法,把这个留给项目后在研究. 先用vue-cli起项目:(未安装的自己先安装:npm install -g vue-cli)       vue init webpack demo       cd demo       npm install       npm run dev 然后安装prerender-spa-plugin (n…

我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染(Prerending). 如果你只需要改善少数页面(例如 首页/, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 HTML (服务端渲染, SSR),而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HT…

VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE,预渲染和SSR还是要搞起来. 1.原理 为什么做服务端渲染之前先去了解了预渲染呢?因为预渲染方案相比服务端渲染简单太多了,而且并不是所有项目都需要服务端渲染的. 预渲染是怎么实现的呢?原理很简单,在项目开发完成之后,将有限的需要SEO的页面挑选出来,借助prerender-spa-plugin插件…

由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使用 第一步:修改配置文件webpack.prod.conf.js 在 const webpackConfig = merge(baseWebpackConfig, {plugins: [ new webpack.DefinePlugin({ new PrerenderSpaPlugin(// Req…

前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerender-spa-plugin,使用淘宝镜像安装 cnpm cnpm install prerender-spa-plugin -D -D 表示在开发环境下使用 cnpm 淘宝镜像安装可以避免安装过程无端报错 2.预渲染一定要把路由模式变成history const router = new Route…

# 预渲染 ## 预渲染简介 SEO和首屏加载速度慢的问题,社区讨论最多的解决方案是同构 SSR,即首屏使用服务端渲染,之后的交互逻辑交给客户端处理,解决了单页应用带来的两个问题,但是也带来了服务器压力增大,学习成本高,对老项目入侵性过强等问题. ## 版本信息 vue: 2.5.2 webpack: 3.6.0 vue-router: 3.0.1 prerender-spa-plugin: 3.4.0 ## 使用 这里我们按照官方 github 的例子敲一下 const path = requ…

今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小项目,确实是可以做服务端渲染,但是这个需要在服务器启动服务,当时我是用的docker,然后用node+nginx做了个容器,然后用pm2做进程守护. 后面我拿原来的Vue项目做了一个对比发现确实是加载速度要比原来的快很多. 后面我又发现有个预渲prerender-spa-plugin染的东西,然后早…

前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而言,使用单页面应用的是无法被 百度的 蜘蛛 爬到的,为此,众多流行的 MVVM 框架都推出了 很多解决方案,有官方的也有三方的,VUE也不例外,本文章就来分享一下 vue-cli 结合 prerender-spa-plugin 插件这种预渲染的 SEO 优化解决方案 1,使用 vue-cli 创建一…