prerender-spa-plugin Vue预渲染配合meta-info优化seo
记录一下解决方案的过程
先安装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的更多相关文章
- vue预渲染及其cdn配置
VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...
- Prerender.io - 预渲染架构,提高AngularJS SEO
近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行.许多公司和开发人员使用这些JavaScript框架开发应用程序.这些框架有很多 ...
- vue 预渲染遇到的坑
前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerend ...
- vue预渲染实践总结
# 预渲染 ## 预渲染简介 SEO和首屏加载速度慢的问题,社区讨论最多的解决方案是同构 SSR,即首屏使用服务端渲染,之后的交互逻辑交给客户端处理,解决了单页应用带来的两个问题,但是也带来了服务器压 ...
- vue 预渲染 prerender-spa-plugin
1.预渲染说明 https://ssr.vuejs.org/zh/#为什么使用服务器端渲染-ssr-? 如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /cont ...
- 服务端预渲染之Nuxt(介绍篇)
现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的 ...
- prerender-spa-plugin预渲染踩坑
为什么要使用预渲染? 为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化.大概有几种方案可以考虑: 服务端做优化: 第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整 ...
- Vue条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...
- Vue项目预渲染机制
我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染( ...
随机推荐
- flutter -webview 报错 err_cleartext_not_permitted
文件 android\app\src\main\AndroidManifest.xml <manifest xmlns:android="http://schemas.android. ...
- php 加密解密算法 用于数据传输
/** * 加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @param int $expire 过期时间 (单位:秒) ...
- python面对对象
面对过程VS面对对象 面向过程的程序设计的核心是过程,过程就是解决问题的步骤,面向过程的设计就是考虑周全什么时候处理什么东西 优点:极大的降低了写程序的复杂度,只需要顺着要执行的步骤,堆叠代码即可. ...
- mybatis配置与使用
一:Mybatis简介 1.名称由来 Mybatis原名叫ibatis.Mybatis一开始属于Apache,2010年从Apache转移到了GoogleCode这个组织中. 2.Mybatis概念 ...
- Java之二分查找算法
算法说明:取中间位置的值与待查字比较.如果比待查字更大,则去列表的前半部分查找,如果比待查字小,则去列表的后半部分查找,直到找到这个待查字,或者返回没有找到这个待查字.其中给定的列表是从大到小排列的有 ...
- 【做题】POI2011R1 - Plot——最小圆覆盖&倍增
原文链接 https://www.cnblogs.com/cly-none/p/loj2159.html 题意:给出\(n\)个点,你需要按编号将其划分成不超过\(m\)段连续的区间,使得所有每个区间 ...
- P4081 [USACO17DEC]Standing Out from the Herd
思路 对所有串建立广义SAM,之后记录SZ,统计本质不同子串时只统计SZ=1的即可 代码 #include <cstdio> #include <algorithm> #inc ...
- [转载]使用IEDriverServer.exe驱动IE11,实现自动化测试
转自:https://www.cnblogs.com/feiquan/p/8531618.html 下载地址: http://dl.pconline.com.cn/download/771640-1. ...
- 访问github慢的解决方案
问题描述 打开https://github.com很慢. 解决办法 1.打开文件C:\Windows\System32\drivers\etc\hosts 2.添加如下内容: 151.101.44.2 ...
- laravel框架——验证码(第一种方法)
一.在框架根目录下下载图形验证码的组件 composer require gregwar/captcha=1.* 二.控制器代码 use Gregwar\Captcha\CaptchaBuilder; ...