vue预渲染及其cdn配置
VUE SEO方案一 - 预渲染及其cdn配置
项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题。总不能白学VUE,预渲染和SSR还是要搞起来。
1.原理
为什么做服务端渲染之前先去了解了预渲染呢?因为预渲染方案相比服务端渲染简单太多了,而且并不是所有项目都需要服务端渲染的。
预渲染是怎么实现的呢?原理很简单,在项目开发完成之后,将有限的需要SEO的页面挑选出来,借助prerender-spa-plugin插件实行一次浏览器渲染,再将渲染好的源代码(.html)打包到项目包中,为这些页面在服务端额外配置路由(不再返回首页模板index.html)。这样这些页面就有单独的静态页面,从而解决了SEO和首屏问题。
2.适用场景及其优劣
预渲染适合那些SEO需求页面有限的应用,比如一个功能型的app。当只有一些推广页面需要SEO的时候,针对这些页面预渲染就非常方便了。相反,如果是一个资讯型的app,有成千上万的文章页面,这时再去做预渲染就比较坑了。
另外,如果预渲染的页面中含有一些动态的数据,那么预渲染的页面首屏数据不会自动更新(因为那是我们已经事先渲染好的,当然不会和用户需要的一致)。这种情况就需要事先布置好骨架屏,等等页面vue接管后重新渲染正确的数据,以免出现不对的数据。当然如果这些数据是SEO相关的,那预渲染就解决不了了。
所以个人认为,预渲染已经可以解决多数SEO问题已经首屏速度问题了,实在不行再上SSR。
3.开始配置
首先我们需要安装预渲染插件prerender-spa-plugin
1npm i -D prerender-spa-plugin
对于整个项目都部署在静态服务根目录下的只要简单的配置就好了
1// vue.config.js
2const path = require('path')
3const resolve = dir => path.join(__dirname, dir)
4const PrerenderSPAPlugin = require('prerender-spa-plugin')
5const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
6
7module.exports = {
8 outputDir: resolve('dist'),
9 publicPath: '/',
10 indexPath: resolve('dist/index.html'),
11 ...
12 chainWebpack: config => {
13 if(process.env.NODE_ENV === 'production'){
14 config.plugin('prerender-spa-plugin')
15 .use(PrerenderSPAPlugin, [{
16 // 必须 - app出口,和outputDir一致就好.
17 staticDir: resolve('dist'),
18 // 必须 - 需要预渲染的路由.
19 routes: ['/', '/about/'],
20 // 必须 - 模拟浏览器渲染
21 renderer: new Renderer({
22 // 渲染时打开浏览器debug
23 headless: false,
24 // 渲染时机,正确的时机保证渲染页面的完整性
25 renderAfterDocumentEvent: 'render-event'
26 })
27 }])
28 }
29 }
30}
31
32//main.js
33new Vue({
34 router,
35 store,
36 render: h => h(App)
37 mounted () {
38 // 这里的触发事件就是renderAfterDocumentEvent中的事件
39 document.dispatchEvent(new Event('render-event'))
40 }
41})
4.cdn的坑
大部分情况下,上面的配置是无法满足项目需求的,因为一般我们会把模板和静态资源分开部署,使用cdn加速。这时候配置就有一点繁琐了。
1// vue.config.js
2const path = require('path')
3const resolve = dir => path.join(__dirname, dir)
4const PrerenderSPAPlugin = require('prerender-spa-plugin')
5const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
6
7module.exports = {
8 outputDir: process.env.NODE_ENV === 'production' ? resolve('dist') : resolve('/www/statics/'),
9 publicPath: process.env.NODE_ENV === 'production' ? 'http://localhost/' : '/',
10 indexPath: resolve('dist/index.html'),
11 ...
12 if(process.env.NODE_ENV === 'production'){
13 config.plugin('prerender-spa-plugin')
14 .use(PrerenderSPAPlugin, [{
15 staticDir: resolve('dist'),
16 indexPath: resolve('/www/statics/index.html'),
17 routes: ['/', '/about/'],
18 postProcess (renderedRoute) {
19 renderedRoute.html = renderedRoute.html.replace(/http:\/\/localhost/g, 'http://cdn.path/')
20 return renderedRoute
21 },
22 renderer: new Renderer({
23 injectProperty: '__PRERENDER_INJECTED__',
24 inject: 'prerender',
25 headless: false,
26 renderAfterDocumentEvent: 'render-event'
27 })
28 }])
29 }
30}
首先我们将输出模板配置到indexPath: resolve('dist/index.html')中
但是我们分离了静态资源,outputDir: resolve('/www/statics/')
分离了静态资源后,预渲染入口index.html也会打包到resolve('/www/statics/')中,因此要为PrerenderSPAPlugin配置indexPath: resolve('/www/statics/index.html')
这时,按理我们应该将静态资源配置为publicPath:http://cdn.path/。但是这样预渲染的时候因为线上cdn中并没有对应的资源,因此会渲染失败。我们需要预先配置一个能够访问到本地资源的地址,比如publicPath:http://localhost/(这边的http://localhost/是我项目中自己开的本地服务),这样预渲染服务器就能渲染成功了,但是静态html中的静态资源地址都变成了http://localhost/,因此我们在PrerenderSPAPlugin中配置postProcess,在其中将http://localhost/替换为http://cdn.path/,再返回出的html就是拥有正确cdn地址的文件了,如果其中有多个cdn或者其他需求也可以自行匹配替换。
看似成功了,但是我们发现,页面中vue接管的时候,webpack中的baseUrl也成了http://localhost/,因此从chunk-vendors.js中异步加载的组件.js的下载域名也是http://localhost/,因此加载错误,所以这边我们需要额外配置webpack。
首先配置PrerenderSPAPlugin的renderer属性injectProperty: 'PRERENDER_INJECTED__'`与`inject: 'prerender'`,这样,在预渲染的时候会配置参数`window.__PRERENDER_INJECTED = prerender
在入口页面的最上方我们引入配置文件@/common/prerender.js
1import '@/common/prerender'
2import Vue from 'vue'
3import App from './App.vue'
4import { createRouter } from './router'
5import { createStore } from './store'
6...
7
8// prerender.js
9/* eslint camelcase: "off" */
10if (process.env.NODE_ENV === 'production') {
11 let isPrerender = window.__PRERENDER_INJECTED__ === 'prerender'
12 __webpack_public_path__ = isPrerender ? 'http://localhost/' : 'http://cdn.path/'
13}
14// 此配置在预渲染模式下继续使用'http://localhost/'这样的本地域名,而正常打包时,这替换为'http://cdn.path/',这样项目就可以正常运行了
15// 因为'__webpack_public_path__'命名不符合eslint,但是我们又需要此规则,所以'prerender.js'第一行加注释'/* eslint camelcase: "off" */'
16//同时因为'__webpack_public_path__'变量是webpack的全局属性,所以配置:
17globals: {
18 __webpack_public_path__: 'writable'
19},
5.最后
预渲染的页面被服务器返回之后,浏览器就会自动抓取页面信息,首屏渲染之后,vue引擎启动并接管页面,这时vue会根据自己加载的组件.js重新渲染页面,这显然是不必要的,因此我们需要在layout-App.vue的根元素(<div>)中添加data-server-rendered="true"属性,这样vue就知道dom是服务端渲染的,它会自动比较并更新需要更新的dom,不会全部重新渲染
vue预渲染及其cdn配置的更多相关文章
- vue 预渲染遇到的坑
前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerend ...
- vue预渲染实践总结
# 预渲染 ## 预渲染简介 SEO和首屏加载速度慢的问题,社区讨论最多的解决方案是同构 SSR,即首屏使用服务端渲染,之后的交互逻辑交给客户端处理,解决了单页应用带来的两个问题,但是也带来了服务器压 ...
- prerender-spa-plugin Vue预渲染配合meta-info优化seo
记录一下解决方案的过程 先安装prerender和puppeteer插件 这个国外大神写的 github地址就不附上了(百度有) cnpm install prerender-spa-plugin ...
- vue 预渲染 prerender-spa-plugin
1.预渲染说明 https://ssr.vuejs.org/zh/#为什么使用服务器端渲染-ssr-? 如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /cont ...
- prerender-spa-plugin预渲染踩坑
为什么要使用预渲染? 为了应付SEO(国内特别是百度)考虑在网站(vue技术栈系列)做一些优化.大概有几种方案可以考虑: 服务端做优化: 第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整 ...
- Vue-cli使用prerender-spa-plugin插件预渲染和配置cdn
参考:https://www.jianshu.com/p/6a4c0b281e7f 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr和预渲染两种解决方案,这里我们只 ...
- vue项目使用 prerender-spa-plugin 预渲染
由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使 ...
- vue(初探预渲染)
---恢复内容开始--- 一.前言 1.简介预渲染 2.案例演示(不配置预渲染) 3.配置预渲染, 二.主要内容 1.简 ...
- Vue项目预渲染机制引入实践
周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末 ...
随机推荐
- .NetCore(.NET6)中使用swagger和swagger版本控制
一..NET6中使用swagger swagger支持 API 自动生成同步的在线文档,下面在.NET6中引入 1.建.NET6应用并建以下控制器 /// <summary> /// 订单 ...
- CodeTON Round 1 (Div. 1 + Div. 2, Rated, Prizes!) A ~ D
A. 给定一个序列,对于任意1<=k<=n 都满足|ai−ak|+|ak−aj|=|ai−aj|, 找满足条件的i和j并输出 思路: 观察样例,发现输出的是最大值和最小值,那么猜答案是最大 ...
- 【推理引擎】ONNX 模型解析
定义模型结构 首先使用 PyTorch 定义一个简单的网络模型: class ConvBnReluBlock(nn.Module): def __init__(self) -> None: su ...
- ES6中数组新增的方法-超级好用
Array.find((item,indexArr,arr)=>{}) 掌握 找出第一个符合条件的数组成员. 它的参数是一个回调函数,对所有数组成员依次执行该回调函数. 直到找出第一个返回值为t ...
- 记-Golang获取本机IP及快速搭建局域FTP
1 package main 2 3 import ( 4 "fmt" 5 "net" 6 "net/http" 7 "strin ...
- SpringMVC源码解读 - RequestMapping注解实现解读
SpringMVC源码解读 - RequestMapping注解实现解读 - RequestCondition体系 https://www.cnblogs.com/leftthen/p/520840 ...
- redis主从复制和哨兵机制
redis主从复制和哨兵机制 技术标签: redis 1.redis主从复制(master/slave模式) 主数据库可以进行读写操作,当写操作导致数据发生变化时会自动将数据同步给从数据库.而一般情况 ...
- Captcha生成验证码,docker部署时问题
https://blog.csdn.net/huofuman960209/article/details/100738712 Dockerfile FROM openjdk:8-jdk-alpine ...
- brew 安装redis
转:https://www.jianshu.com/p/e1e5717049e8 编辑新安装php的 p.p1 { margin: 0; font: 11px Menlo; color: rgba(0 ...
- LVS集群和Keepalived高可用实战
第四十章LVS集群和Keepalived高可用实战 一.ARP协议 1.概念 地址解析协议,即ARP(AddressResolutionProtocol),是根据IP地址获取物理MAC地址的一个TCP ...