项目用的是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. HDU 6231 (K-th Number)

    题目链接:https://cn.vjudge.net/problem/HDU-6231 思路:二分+双指针: #include <stdio.h> #include <iostrea ...

  2. python中zip()函数基本用法

    zip()函数接受一系列可迭代对象作为参数,将不同对象中相对应的元素打包成一个元组(tuple),返回由这些元组组成的list列表,如果传入的参数的长度不等,则返回的list列表的长度和传入参数中 ...

  3. C#中如何获取一个二维数组的两维长度,即行数和列数?以及多维数组各个维度的长度?

    如何获取二维数组中的元素个数呢? int[,] array = new int[,] {{1,2,3},{4,5,6},{7,8,9}};//定义一个3行3列的二维数组int row = array. ...

  4. [转]阮一峰:理解RESTful架构

    作者: 阮一峰 日期: 2011年9月12日 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通 ...

  5. javascript自我测试题

    javascript自我测试题--14道题而已! 地址:http://perfectionkills.com/javascript-quiz/ 司徒正美的答案解析:http://www.cnblogs ...

  6. Linux环境下,开启tomcat时报transport error 202: bind failed: 地址已在使用

    转载自:http://blog.csdn.net/mooncom/article/details/61913813 问题描述:今天我在Linux环境下配置tomcat,在tomcat/conf下的se ...

  7. 拓扑排序 POJ 1094 Sorting It All Out

    题意:给定N个字和M行他们之间的关系,要求输出他们的拓扑排序.此题采用边输入边检测的方式,如果发现环,就结束并输出当前行号:如果读取到当前行时,可以确定拓扑序列就输出,不管后面的输入(可能包含环路): ...

  8. 发布倒计时!JDK11为我们带来哪些新特性?

    今年7月底,JDK11已经进入了Rampdown Phase Two阶段,这标志着该版本所有特性已经被冻结,不会有新的JEP会加入版本中. 这一阶段将会修复P1–P2级BUG,之后,JDK11预定于今 ...

  9. springMVC绑定json参数之二(2.1)

    二.springmvc 接收不同格式的json字符串 1.首先扫盲几个知识点: 这个绑定json参数讲的都是用@RequestBody标签,所以前台必须传json字符串,不能是json对象,但是如果不 ...

  10. Java Numbers

    通常情况下,当我们与数字打交道,使用原始数据类型,如字节,如int,long,double等 例子: int i = 5000; float gpa = 13.65; byte mask = 0xaf ...