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

然后安装prerender-spa-plugin

(npm install --save-dev prerender-spa-plugin)

然后去配置:在build/webpack.prod.conf.js
        var PrerenderSpaPlugin = require('prerender-spa-plugin')
       在build/webpack.prod.conf.js中的plugins配置:
        new PrerenderSpaPlugin(
            // 编译项目工程的路径
           path.join(__dirname, '../dist'),
           // 你想预渲染的路由
         ['/', '/new']
        )

npm run build生成dist文件

你会发现dist里面有new/index.html (里面有index.html的内容)

vue的预渲染--seo的更多相关文章

  1. vue(初探预渲染)

    ---恢复内容开始--- 一.前言 1.简介预渲染                     2.案例演示(不配置预渲染)                     3.配置预渲染, 二.主要内容 1.简 ...

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

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

  3. Vue项目预渲染机制

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

  4. vue预渲染及其cdn配置

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

  5. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  6. HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)

    前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...

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

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

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

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

  9. vue 预渲染遇到的坑

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

随机推荐

  1. eclipse导入java web项目,项目出现红叉而其他地方没有红叉的问题解决方法

    eclipse导入别人的Java web项目时会出现这种情况:仅项目名出现红叉而其他地方没有红叉的问题.这可能是以下几种情况导致的,其解决方法如下: 1.导入项目之前,请确认工作空间编码已设置为utf ...

  2. Python 转义字符中没有这个 「\e」 !

    问题来源于技术交流群里: 常见的转义字符 \n.\t 之类的我们都知道什么意思,但是这个 \e 是什么意思呢? 抱着一股钻研的精神,我搜了一把. 结果,所有的页面里都是只有一句简单的 \e 代表转义. ...

  3. 2017.10.2北京清北综合强化班DAY2

    a[问题描述]你是能看到第一题的 friends呢.                                                —— hja世界上没有什么比卖的这 贵弹丸三还令人绝 ...

  4. UVA624(01背包记录路径)

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  5. Python:模块详解及import本质

    转于:http://www.cnblogs.com/itfat/p/7481972.html 博主:东大网管 一.定义: 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能), ...

  6. 【转】 Pro Android学习笔记(六二):Preferences(6):header

    目录(?)[-] 代码实现 header xml文件 在前面的例子,我们主要学习了PreferenceScreen的xml如何写,preference有哪些类型.在代码中,我们为了不提示warning ...

  7. 二 Flask快速入门

    1: 外部可访问的服务器: 如果你运行了这个服务器,你会发现它只能从你自己的计算机上访问,网络中其它任何的地方都不能访问.在调试模式下,用户可以在你的计算机上执行任意 Python 代码.因此,这个行 ...

  8. 问题:C#发布的项目浏览时出现“Server Application Unavailable”错误;结果:Server Application Unavailable出现的原因及解决方案小结

    Server Application Unavailable出现的原因及解决方案小结 作者: 字体:[增加 减小] 类型:转载 时间:2012-05-23 今天在服务器安装了个.net 4.0 fra ...

  9. LAMP 2.0Apache日志切割

    每次访问网站就会产生若干条日志,当然前提是已经配置了日志. 配置日志的文件在 vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 把注释掉的这两行打 ...

  10. LAMP 1.8默认虚拟主机

    默认虚拟主机是为了解决别人域名恶心绑定自己的服务器ip,可导致服务器上的网站排名靠后,即干扰seo优化 我们访问指定的两个网站可以直接访问,ip也可以访问 打开配置文件 vim /usr/local/ ...