记录一下解决方案的过程

先安装prerender和puppeteer插件  这个国外大神写的  github地址就不附上了(百度有)

cnpm install prerender-spa-plugin

npm install --save puppeteer --ignore-scripts

这里注意  一定要用cnpm代理下载   不然下载不到chromium

安装好之后注意在package.json上查看版本号  不同版本号有不同的写法  这个一定要注意（可以上github上查看不同版本的写法）

第一步：引入插件及方法（不同版本不同用法  此处版本为3.x，2.x请忽略）

第二步：配置PrerenderSPAPlugin

第三步：main.js中讲render-event方法放入

这里记住一定要将方法放入mouted里面

第四步：将mode设置为history模式（不用history模式不行！！！这里一定要改为history模式）

第五步：将config/index.js下的assetsPublicPath换成'../'

最后直接打包npm run build就可以了

过程中会出现minichrome测试浏览器，生成dist文件内包含预渲染文件目录

就到这里   meta-info参考官网设置就行

prerender-spa-plugin Vue预渲染配合meta-info优化seo的更多相关文章

  1. vue预渲染及其cdn配置

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

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

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

  3. vue 预渲染遇到的坑

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

  4. vue预渲染实践总结

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

  5. vue 预渲染 prerender-spa-plugin

    1.预渲染说明 https://ssr.vuejs.org/zh/#为什么使用服务器端渲染-ssr-? 如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /cont ...

  6. 服务端预渲染之Nuxt(介绍篇)

    现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的 ...

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

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

  8. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  9. Vue项目预渲染机制

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

随机推荐

  1. Linux 下 ls -l 命令执行显示结果的每一列含义【转载】

    转自:zhuoya_的博客 原文地址>>https://blog.csdn.net/zhuoya_/article/details/77418413

  2. radhat6.6上安装oracle12c RAC （二）

    二.GI(Grid Infrastructure)安装 首先将安装包传到node1的目录 2.1 GI软件安装 2.1.1.解压安装包 #su - grid解压 GRID 到 GRID用户的$ORAC ...

  3. CEF 支持的命令行参数

    参考:https://peter.sh/experiments/chromium-command-line-switches/ List of Chromium Command Line Switch ...

  4. 关于matplotlib绘制直方图偏移的问题

    在使用pyplot绘制直方图的时候我发现了一个问题,在给函数.hist()传参的时候,如果传入的组数不是刚刚好(就是说这个组数如果是使用(最大值-最小值)/组距计算出来,而这个数字不是整除得来而是取整 ...

  5. vue filters中使用data中数据

    vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...

  6. Java基本语法(一)

    1,Java中命名规则与规范 命名规则是我们必须遵守的约定: 1,Java中需要命名的地方(我们称之为标识符),可以26个英文字母(不区分大小写),0-9的数字,_和$等组成,不能包含特殊字符(#), ...

  7. Oracle 《积累章》 根据身份证号码更新当前出生日期

    ,),'yyyy-MM-dd') 函数使用 to_date()      日期转换函数 to_date(substr(t.sfzh,7,8),'yyyy-MM-dd')   将“19901212” 转 ...

  8. Java问题解决："错误: 找不到或无法加载主类"

    参考资料:https://www.cnblogs.com/wangxiaoha/p/6293340.html 场景: 使用java命令运行.class文件时出现:“错误: 找不到或无法加载主类”: 解 ...

  9. Jmeter 获取系统时间，和对系统时间进行增减时间

    今天做了一个测试,比如发送短信验证码之后的, 验证90s被验证码有效的问题 那如何测试开发的代码,判断了90s内有效呢1. 验证码获取时间距离现在89秒,验证通过2. 验证码获取时间距离现在90秒,验 ...

  10. sqlserver存储过程的使用

    参考网址:https://www.cnblogs.com/chaoa/articles/3894311.html(存储过程)    https://www.cnblogs.com/selene/p/4 ...