项目用的是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. python生成excel格式座位表

    脚本分两个文件: 1.生成二维随机列表:GenerateLocaltion.py 2.将列表导入excel文件:CreateExcel.py 先上GenerateLocaltion.py: impor ...

  2. 关于android 图片加载优化

    android应用对图片处理算是比较频繁的了,尤其是在程序加载大量图片和高分辨率图片时,最容易产生oom异常,下面是个人平时一些省内存加载方法 方法一: public Bitmap decodeFil ...

  3. 2017-2018-1 20179215《Linux内核原理与分析》第五周作业

    一.视频学习 1.系统调用的三层皮:xyz(API).system call(中断向量).sys_xyz(不同种类的服务程序). 2.Libc库定义个一些API引用了封装例程(wrapper rout ...

  4. ACM学习历程—HDU5637 Transform(数论 && 最短路)

    题目链接:http://codeforces.com/problemset/problem/590/A 题目大意是给两种操作,然后给你一个s,一个t,求s至少需要多少次操作到t. 考虑到第一种操作是将 ...

  5. [转]JS中apply和call的联系和区别

    JS中有时常用到 apply 和 call 两个方法,搜索网上很多,整理如下,简单看看这两个联系和区别, 联系: 网上查到关于apply和call的定义:这两个方法都能劫持另外一个对象的方法,继承另外 ...

  6. C#自定义控件 绘制框

    上几张测试的 效果 虽然全是用.net 的绘图库画的,但是手动双缓冲,不会闪烁,感觉还不错,源码开放了,喜欢的拿去扩展吧; 用于撤销的存放图像的数据结构我设置为10个,怕是内存崩了,我看mspaint ...

  7. linux命令-tar工具详解

    把文件和目录打成一个包 文件打包 [root@wangshaojun ~]# tar -cvf 1.tar 1.txt 123 234 ///-c创建 -v可视化 -f file放最后面1.txt12 ...

  8. USACO-Greedy Gift Givers(贪婪的送礼者)-Section1.2<2>

    [英文原题] Greedy Gift Givers A group of NP (2 ≤ NP ≤ 10) uniquely named friends has decided to exchange ...

  9. shell 自动删除n天前备份

    Linux自动删除n天前备份Linux是一个很能自动产生文件的系统,日志.邮件.备份等.因此需要设置让系统定时清理一些不需要的文件.语句写法:     find 对应目录 -mtime +天数 -na ...

  10. [计数问题dp]子数列的个数

    http://www.51nod.com/tutorial/course.html#!courseId=15 解题关键:主要是一种思想 $dp[i] = dp[i - 1]*2$ 如果a[i]不在之前 ...