记录一下解决方案的过程

先安装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. GTID 跳过事物

    Mysql5.7 stop slave; set @@SESSION.GTID_NEXT='507e80e9-3648-11e9-aa70-fa163e77a52d:20173'; begin; co ...

  2. 【题解】Luogu P2347 砝码称重

    正经·DP题解 一道非常好的背包练手题( sto(注:原思路来源 SLYZ_0120 的题解)orz 开始这道题 1.输入六个数,存进数组中 2.初始化 f 数组为0. f [ i ] 表示重量为 i ...

  3. SpringBoot后台接收前台的字符串数据

    需求 将前台传入的字符串数据转为int类型. 操作 在pom.xml中添加引用. <dependency> <groupId>org.apache.commons</gr ...

  4. Django troubleshootings

    当在云服务器上部署Django服务时: 1. 首先要在云上的主机上添加相应的端口访问权限. 2. 在project下面的urls.py里面设置如下: ALLOWED_HOSTS = ['www.aby ...

  5. 【Mac】【问题】

    [一]export: `PATH;': not a valid identifier 可能是环境变量配的有问题 一般是~/.bash_profile 多了空格或是多了$符号之类的

  6. OO随笔

    第一次作业——多项式计算 1.自我程序分析 第一次作业是多项式计算,只使用了一个多项式类.第一次接触面向对象的程序,还比较生疏,不是很能理解面向对象的思想.将读入,处理,计算,都放到了main函数中, ...

  7. c#数据库事务锁类型

    一.脏读.不可重复读.幻象读的区别   1.脏读:包含未提交数据的读取.例如,事务 a 更改了某行(数据库已发生更改,但尚未提交,有可能发生回滚),事务 b 在事务 a 提交更改之前读取已更改的行.如 ...

  8. java笔记 -- 数组

    概念: 数组是一种数据结构, 用来存储同一类型值的集合. 通过一个整型的下标可以访问数组中的每一个值. 声明: int[] a(推荐,将类型int[](整形数组)和变量名分开了) 或者int a[] ...

  9. Project Euler 75: Singular integer right triangles

    题目链接 思路: 勾股数组,又称毕达格拉斯三元组. 公式:a = s*t b = (s^2 - t^2) / 2 c = (s^2 + t^2) / 2 s > t >=1 且为互质的奇数 ...

  10. Java多线程概念

    1 多线程 1.1 什么是进程? 应用程序的一次运行产生进程. 为什么存在进程的概念? 1.2 什么是线程 参考:https://www.cnblogs.com/geeta/p/9474051.htm ...