项目用的是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. the referenced script on this behaviour is missing!

    1.看看你脚本上挂的某个组件是不是发生了变动,比如被删除了什么的 2.最有可能的是你创建完脚本后,中途改过脚本的名字,致使脚本名字和内部的名字不统一.

  2. C语言小程序(三)、判断两个日期之差

    输入两个日期,计算之间相差多少天. 用了两种方法实现,第二种利用结构体,代码比较清晰,其余的都一样. 1.普通的写法 #include <stdio.h> int leapyear(int ...

  3. 原 requirements.txt 介绍 & 快捷生成

    requirements.txt介绍   requirements.txt 文件 里面记录了当前程序的所有依赖包及其精确版本号.   这个文件有点类似与Rails的Gemfile.其作用是用来在另一台 ...

  4. [转]angularjs的provider~ (Provider, Value, Constant, Service, Factory, Decorator)

    用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄 ...

  5. 一次spark卡顿分析

    在104上面执行,经常会发生卡到了如下一句话: storage.BlockManagerInfo: Added broadcast_8_piece0 当再次卡顿的时候,我直接退出,然后通过yarn看后 ...

  6. POJ2442:Sequence

    浅谈堆:https://www.cnblogs.com/AKMer/p/10284629.html 题目传送门:http://poj.org/problem?id=2442 我们先简化题意,假设只有两 ...

  7. Poj 2602 Superlong sums(大数相加)

    一.Description The creators of a new programming language D++ have found out that whatever limit for ...

  8. js浮点数运算出现误差解决方案

    1.数据展示类(使用 toPrecision 凑整并 parseFloat 转成数字后再显示) parseFloat(1.4000000000000001.toPrecision(12)) === 1 ...

  9. Project Server2016升级安装问题项目中心无法显示

    sharepoint 2016升级后,project server 相关中心页面出现空白页面,这是是sharepoint2016一个bug,解决方案用PWA.resx内容替换PWA.en-us.res ...

  10. numpy.ones_like(a, dtype=None, order='K', subok=True)返回和原矩阵一样形状的1矩阵

    Return an array of ones with the same shape and type as a given array. Parameters: a : array_like Th ...