vue的预渲染--seo
项目用的是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的更多相关文章
- vue(初探预渲染)
---恢复内容开始--- 一.前言 1.简介预渲染 2.案例演示(不配置预渲染) 3.配置预渲染, 二.主要内容 1.简 ...
- Vue项目预渲染机制引入实践
周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...
- Vue项目预渲染机制
我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染( ...
- vue预渲染及其cdn配置
VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
- prerender-spa-plugin Vue预渲染配合meta-info优化seo
记录一下解决方案的过程 先安装prerender和puppeteer插件 这个国外大神写的 github地址就不附上了(百度有) cnpm install prerender-spa-plugin ...
- vue项目使用 prerender-spa-plugin 预渲染
由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使 ...
- vue 预渲染遇到的坑
前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerend ...
随机推荐
- codeforces 650 C. Watchmen(数学公式)
C. Watchmen time limit per test 3 seconds memory limit per test 256 megabytes input standard input o ...
- linux命令学习笔记(21):find命令之xargs
xargs是一条Unix和类Unix操作系统的常用命令.它的作用是将参数列表转换成小块分段传递给其他命令,以避免参数列表过长的问题 xargs的作用一般等同于大多数Unix shell中的反引号,但更 ...
- 多媒体的框架 - OpenCore框架概述
OpenCore是一个多媒体的框架,从宏观上来看,它主要包含了两大方面的内容:PVPlayer:提供媒体播放器的功能,完成各种音频 (Audio).视频(Video)流的回放(Playback)功能. ...
- uva1160 易爆物
#include<iostream>#include<cstdio>#include<algorithm>#include<cstdlib>using ...
- Python 转义字符中没有这个 「\e」 !
问题来源于技术交流群里: 常见的转义字符 \n.\t 之类的我们都知道什么意思,但是这个 \e 是什么意思呢? 抱着一股钻研的精神,我搜了一把. 结果,所有的页面里都是只有一句简单的 \e 代表转义. ...
- sqlite表结构动态读取工具(Chole ORM框架)
Chole ORM框架 sqlIte于嵌入式数据库读取比较有利,不需要安装office也可以进行,可以在服务器系统当中使用. 所以我开发了这款工具,然后就是为了动态的读取表结构,然后根据表结构加载所有 ...
- LOJ_#2720. 「NOI2018」你的名字 _后缀数组+主席树+倍增
题面: https://loj.ac/problem/2720 考虑枚举T串的每个后缀i,我们要做两件事. 一.统计有多少子串[i,j]在S中要求位置出现. 二.去重. 第二步好做,相当于在后缀数组上 ...
- CSS:word-wrap/overflow/transition
一 自动换行:一个div有固定宽高,如果其内容很长,必须两行以上才能显示完整的时候,有两种情况要留意 1 默认如果其内容都是中文,那么内容是可以自适应,而不会溢出div 2 如果内容除了中文之外,还有 ...
- HUD1455:Sticks
Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- eclipse个人觉得有用的快捷键
CTRL+SHIFT+F 自动整理代码格式 CTRL+M 最大/还原当前编辑窗口 CTRL+/ 注释当前行 CTRL+1 快速修复 CTRL+D 删除当前行 SHIFT+ENTER 在当前行前面插入空 ...