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 632B B. Alice, Bob, Two Teams(暴力)
B. Alice, Bob, Two Teams time limit per test 1.5 seconds memory limit per test 256 megabytes input s ...
- 线段树Final版本
结构体是个好东西... 看着逼格很高 #include<iostream> #include<cstdio> #include<cstdlib> #include& ...
- Gym - 100851G:Generators(人尽皆知但是WA题)
题意:现在有函数,每一项Xi=(A*X(i-1)+B)%C.现在给定N个函数以及K:X0,A,B,C.然你再每个函数选择一个数,使得其和最大,而且不被K整除. X0,A,B,C<=1e3 :K& ...
- ACM学习历程—HDU1030 Delta-wave(数学)
Description A triangle field is numbered with successive integers in the way shown on the picture be ...
- 装了Ironpython还需要装Python吗?
IronPython 是一种在 NET 和 Mono 上实现的 Python 语言,由 Jim Hugunin(同时也是 Jython 创造者)所创造.IronPython是优雅的python编程语言 ...
- redis的五种数据类型及应用场景
前言 redis是用键值对的形式来保存数据,键类型只能是String,但是值类型可以有String.List.Hash.Set.Sorted Set五种,来满足不同场景的特定需求. 本博客中的示例不是 ...
- [转]基于phantomJS实现web性能监控
1.web性能监控背景描述 上期分享的<Web性能监控自动化探索之路–初识WebPageTest>从依赖webpagetest的角度给出了做性能日常检查的方案,但由于依赖结构相对复杂我们需 ...
- Erlang generic standard behaviours -- summary
gen_server 相关的片段分析得也差不多了, 这篇作为一个简要的总结.这一系列相关的分析暂且告一段落(之后如有必要,还会回来的 ^^ ),下一个系列主要是以pool 相关, 包括但不仅限于开源项 ...
- Spring boot 学习一:认识Spring boot
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- TS学习之解构与展开
一.解构 1.解构数组 let input = [1, 2]; let [first, second] = input; console.log(first); // outputs 1 consol ...