1、预渲染说明

https://ssr.vuejs.org/zh/#为什么使用服务器端渲染-ssr-？

如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

2、预渲染插件prerender-spa-plugin

插件地址：

https://github.com/chrisvfritz/prerender-spa-plugin

3、示例代码：

https://github.com/MengFangui/prerender-spa-plugin-demo

4、http-server起服务

https://www.npmjs.com/package/http-server

在http-server中起服务，即可查看输出到dist文件夹中的文件。

说明：需要起服务查看静态化后的文件，单独将html文件运行在浏览器中是不行的（页面会白屏或者丢失交互效果）

vue 预渲染 prerender-spa-plugin的更多相关文章

  1. vue预渲染及其cdn配置

    VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...

  2. vue 预渲染遇到的坑

    前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerend ...

  3. prerender-spa-plugin Vue预渲染配合meta-info优化seo

    记录一下解决方案的过程 先安装prerender和puppeteer插件  这个国外大神写的  github地址就不附上了(百度有) cnpm install prerender-spa-plugin ...

  4. vue预渲染实践总结

    # 预渲染 ## 预渲染简介 SEO和首屏加载速度慢的问题,社区讨论最多的解决方案是同构 SSR,即首屏使用服务端渲染,之后的交互逻辑交给客户端处理,解决了单页应用带来的两个问题,但是也带来了服务器压 ...

  5. Prerender.io - 预渲染架构，提高AngularJS SEO

    近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行.许多公司和开发人员使用这些JavaScript框架开发应用程序.这些框架有很多 ...

  6. prerender-spa-plugin预渲染踩坑

    为什么要使用预渲染? 为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化.大概有几种方案可以考虑: 服务端做优化: 第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整 ...

  7. vue项目使用 prerender-spa-plugin 预渲染

    由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使 ...

  8. Vue项目预渲染机制引入实践

    周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...

  9. Vue项目预渲染机制

    我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染( ...

随机推荐

  1. js实现侧边栏信息展示效果

    目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...

  2. CentOS6.9下安装 Pika 2.2.5(新增了拷贝安装版本的办法+对于PID的位置及数据库位置的理解)

    一.环境准备 yum install -y snappy-devel  protobuf-compiler  protobuf-devel bzip2-devel  zlib-devel bzip2 ...

  3. json数据格式了解

    json数据格式介绍: https://en.wikipedia.org/wiki/JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式 json语法 ...

  4. 集训day15 t1 poj3728

    [问题描述] 有一颗n个节点的树 每个节点上都有许多奸商在卖东西,第i个奸商的理想价格为vi,即他会以vi的价格购买或卖出一件东西 有m个人希望从树上的某个点走到另一个点,问你在只进行一次买卖(每次仅 ...

  5. 并查集+背包 【CF741B】 Arpa's weak amphitheater and Mehrdad's valuable Hoses

    Descirption 有n个人,每个人都有颜值bi与体重wi.剧场的容量为W.有m条关系,xi与yi表示xi和yi是好朋友,在一个小组. 每个小组要么全部参加舞会,要么参加人数不能超过1人. 问保证 ...

  6. 【找规律】Codeforces Round #392 (Div. 2) C. Unfair Poll

    C. Unfair Poll time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  7. [HDU6268]Master of Subgraph

    [HDU6268]Master of Subgraph 题目大意: 一棵\(n(n\le3000)\)个结点的树,每个结点的权值为\(w_i\).给定\(m(m\le10^5)\),对于任意\(i\i ...

  8. TZOJ 5347: 数据结构实验：删除链表元素

    描述 完成链表的创建.元素查找和删除等操作. 部分代码已经给出,请补充完整,提交时请勿包含已经给出的代码. void PrintLinkList(Node *head) { int flag = 0; ...

  9. 使用FluentValidation来进行数据有效性验证

    之前我介绍过了使用系统自带的Data Annotations来进行数据有效性验证,今天在CodePlex上逛的时候,发现了一个非常简洁好用的库:FluentValidation 由于非常简洁,就直接拿 ...

  10. Cisco模拟器Web-IOU使用说明 转

    http://blog.sina.com.cn/s/blog_af0abf1f0102uztk.html   GNS3作为使用最多的Cisco官方模拟器,是因为它使用简单,所有设置图形化,是一款非常强 ...