记录一下解决方案的过程

先安装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. [Python数据挖掘]第5章、挖掘建模（上）

    一.分类和回归 回归分析研究的范围大致如下: 1.逻辑回归 #逻辑回归 自动建模 import pandas as pd from sklearn.linear_model import Logist ...

  2. 【转载】opencv实现人脸检测

    全文转载自CSDN的博客(不知道怎么将CSDN的博客转到博客园,应该没这功能吧,所以直接复制全文了),转载地址如下 http://blog.csdn.net/lsq2902101015/article ...

  3. Elasticsearch－搭建自己的搜索系统

    参考链接: https://blog.csdn.net/weixin_42730079/article/details/81113806 https://www.cnblogs.com/dreamro ...

  4. 关于C#的Main(String[] args)参数输入问题

    关于C#的Main(String[] args)参数输入问题 指定相关的测试代码 首先,写一个用于测试的关于Main(String[] args)参数输入有关的代码类,如下: using System ...

  5. LINQ更新提示找不到行或行已更改的解决一例

    LINQ对一行数据进行更改,怎么都无法提交,所有字段值都不是空值,后来看了实体,我发现更改的数据是主键,去数据库看这个字段却不是主键,原来是数据库取消主键了,实体代码没取消,因为更改了主键,所以无法更 ...

  6. Unity3D制作红色射线

    1.在发射射线的位置创建一个空物体用于存储发射点的位置信息. 2.制作射线,为发射射线物体添加LineRenderer组件  制作Material材质并把其类型改为Particles/Addictiv ...

  7. criteo marketing api 相关

    官网登陆地址:https://marketing.criteo.com/ 官网api介绍:https://marketing.criteo.com/e/s/article?article=360001 ...

  8. 浏览器输入URL后，HTTP请求返回的完整过程

    1.Redirect,跳转    浏览器记录里这个地址永久跳转的新地址,浏览器先去判断需不需要跳转 2.Application cache ,应用缓存    浏览器看请求的资源是否有缓存 3.DNS解 ...

  9. 小程序App.js 传递数据给实例（app异步数据问题）

    在最开始初始化的时候,都会触发app.js 这个里面的onload生命方法, 在这个方法里面我们可以获取之前的存储数据/异步请求等等操作, 但是这些操作一般都是需要稍许时间.也就是说在其他界面加载结束 ...

  10. 如何在开发过程中获取客户端的ip呢？

    在开发工作中,我们常常需要获取客户端的IP.一般获取客户端的IP地址的方法是:request.getRemoteAddr();但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实 ...