vue服务器端预渲染prerender-spa-plugin的实践
对一个网站来说,seo是非常重要的一块内容。最近用vue做了一个网站,很自然地找到了Vue SSR 指南。我做的网站只有几个注重营销的页面需要seo,发现在这种场景下用prerender-spa-plugin
做下预渲染就够了。后面在具体实践中遇到了些问题,现记录下。
首先是由于baseUrl填的cdn的地址,如果打包是在本地的话,这时预渲染时会请求cdn上的资源,很自然是返回404找不到资源。
解决方案是使资源打包后就能通过cdn访问,目前条件限制,只能在本地打包,只能采用笨方式,先打包一遍,这时是没做好预渲染的,然后上传资源到cdn后,再打包一次做预渲染。
2018.09.18更新
上面这种方式不可取,其实还有些方式。
- 本地绑定host
这种方式简单,但是有不确定因素,如果在集成环境中,修改hosts可能不太方便。
- 动态重定向cdn地址到本地
github.com/Tribex/prer…
给源项目发了个pr。
终于做好预渲染了,但这时发现初始页面有内容但没有样式,过了会才有样式,导致有一个明显的闪现。原因在于页面做了代码分离,当前页面的chunk并非初始chunk,所以当前页面的css在页面中是prefetch,优先级比较低。
解决方案是识别出当前页面依赖的css,并把rel="prefetch"改成rel="stylesheet"。
先给chunk加上chunkName,以方便后面的识别
const routes = [{ path: '/', component: () => import(/* webpackChunkName: "home" */ './controller/home.vue') },{ path: '/qa', component: () => import( /* webpackChunkName: "qa" */ './controller/qa.vue') },{ path: '/pay/callback', component: () => import('./controller/pay-success.vue') },{ path: '/order/list', component: () => import('./controller/order.vue') },{ path: '/pages/log2', component: () => import('./controller/login.vue') },
]
复制代码
然后通过prerender-spa-plugin
的postProcess选型替换下rel="prefetch"
postProcess (context) {const pathToChunkNameMap = {'/': 'home','/qa': 'qa'}const chunkName = pathToChunkNameMap[context.route]if (!chunkName) {return context}const reg = new RegExp('(' + chunkName + '\\.[a-zA-Z0-9]+\\.css") rel="prefetch"')context.html = context.html.replace(reg, ($1, $2) => {return $2 + ' rel=stylesheet'})return context;
},
复制代码
vue服务器端预渲染prerender-spa-plugin的实践相关推荐
- vue使用预渲染prerender-spa-plugin
前言:vue单页面对seo不友好,所以我打算通过预渲染来解决下seo问题. 目前我知道有2种方法, (1)SSR渲染(服务器) (2)prerender-spa-plugin插件预渲染(部分路由)(好 ...
- 预渲染vue.js应用程序(使用node或laravel)
服务器端渲染现在非常流行.但它也并非没有缺点.预渲染是一种替代方法,在某些情况下甚至可能更好.下面我们来看一下如何预渲染vue.js应用程序. 在本文中,我们将探讨预渲染如何与vue.js一起工作,并 ...
- ajax div 赋值重新渲染_优化向:单页应用多路由预渲染指南
前言 Ajax 技术的出现,让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容,这就是单页应用.在一个单页应用中,往往只有一个 html 文件,然后根据访问的 url 来匹配对应的路由脚本, ...
- 构建时预渲染:网页首帧优化实践
前言 自JavaScript诞生以来,前端技术发展非常迅速.移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR .CSR.预渲染等技术.在美团支付的前端技术体系里,通过预渲染提 ...
- 对vue服务端渲染的理解以及其使用场景
理解 本质上,服务端渲染其实是生成了应用程序的"快照",将vue及其对应的库运行在服务端,令其去访问接口去预加载数据,然后将获取到的数据作为组件的初始状态 首先拉取数据,此后,组件 ...
- Vue SPA项目SEO优化之预渲染Prerender-spa-plugin
目的 由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容,通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题. 可以看到项目编译后的index.ht ...
- prerender ajax,Vue Prerender.io 预渲染seo优化
前言 目前 Vue单页面应用在前端界混的风生水起,它的开发思想使得我们能真正做到前后端分离.解耦.单页面应用使用浏览器动态解析JS,呈现出最终的页面,用户体验比较好,网站性能也提高不少.但网络爬虫并不 ...
- prerender html5,HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
- vue使用prerender预渲染配合vue-meta实现单页面实现SEO优化
公司项目在已在开发完成的情况下通知需要做SEO优化.因为项目使用的是vue做的单页面应用,顿时人都不好了,只好网上搜罗出来一些配置(其实是另一个带我的老大哥他做的,但是他要走了,工作交接给我, 我需要 ...
最新文章
- 把数学函数印在T恤上却被告侵权,这位程序员怒了
- 高级会计师资格考试成绩合格证在全国范围内几年有效
- 再谈多态——向上映射及VMT/DMT(转)
- 全球传媒巨头纷纷布局,VR影视内容的爆点可期
- 详解Redis的架构演化之路(附16张图解)
- delphi版本修改PE头源码
- java 画金刚石_帮忙改错!java 画金刚石
- C# 从文本列中检索数据
- 15. Django基础:cookies和sesseion
- 网络电视机顶盒测试软件,调试接口查找方法,机顶盒刷成全网通盒子,实现免费看电视...
- 抗滑桩初始弹性系数计算_抗滑桩设计验算1
- appliedzkp的zkevm(7)定制化Proof System
- 以太网交换机和普通交换机主要的8大区别介绍
- VR电竞游戏在英特尔®架构上的用户体验优化
- Python网络爬虫与信息提取——网络爬虫Scrapy框架
- 微信还能这么玩?半透明的微信背景主题用起来!
- 腾讯云IM回调接口-单聊发言后回调
- Stanford University courses of computer science department(斯坦福计算机系课程设置)
- 十倍业务增长下,饿了么技术如何应对(中)?
- 假设检验-方差齐性检验