Vue2 SSR渲染根据不同页面修改 meta


Posted in Javascript onNovember 20, 2017

本文主要介绍了Vue2 SSR渲染根据不同页面修改 meta,分享给大家,具体如下:

注意:

经过测试, vue-meta 会导致内存泄漏, 请慎用…

以现在 vue2 的 服务端渲染模式, 都是通过 webpack 生成 html 模版文件(或者直接在 server.js 里拼接), 然后通过fs.readFileSync 读取该文件, 再通过 res.end 输出, 这样就造成 meta 修改很麻烦

这时候我们可以借助 vue-meta 来管理, 下面以官方的vue-hackernews-2.0为例, 说下使用方法:

安装

Yarn

yarn add vue-meta

NPM

npm install vue-meta --save

准备插件

在router/index.js里添加

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'
 
Vue.use(Router)
Vue.use(Meta)
 
export default new Router({
 // ...
})

服务端渲染

在server-entry.js里添加

import { app, router, store } from './app'
 
const isDev = process.env.NODE_ENV !== 'production'
const meta = app.$meta() // 这行
 
export default context => {
 router.push(context.url)
 context.meta = meta // 这行
 const ss = isDev && Date.now()
 // ...
}

在server.js里修改

renderStream.once('data', () => {
 res.write(indexHTML.head)
})


renderStream.once('data', () => {
 const { title, meta } = context.meta.inject()
 indexHTML.head = indexHTML.head.replace(/<title.*?<\/title>/g, title.text())
 indexHTML.head = indexHTML.head.replace(/<meta.*?name="description".*?\/>/g, meta.text())
 res.write(indexHTML.head)
})

这里只选择替换 title 和 description, 如果还需要其他的, 自行添加正则

注意: 请保证模版中包含

<title>xxxx</title>


<meta name="description" content="xxxx">

修改路由组件

在路由组件添加

export default {
 name: 'frontend-index',
 prefetch: fetchInitialData,
 // 添加以下代码
 metaInfo () {
 const title = 'M.M.F 小屋 - 首页'
 return {
  title,
  meta: [{ vmid: 'description', name: 'description', content: title }]
 }
 }
}

或者这样

export default {
 name: 'frontend-article',
 prefetch: fetchInitialData,
 // 添加以下代码
 metaInfo () {
 const title = this.article.title
 return {
  title: title + ' - M.M.F 小屋',
  meta: [{ vmid: 'description', name: 'description', content: title + ' M.M.F 小屋' }]
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
详解vue+css3做交互特效的方法
Nov 20 #Javascript
解读ES6中class关键字
Nov 20 #Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 #Javascript
Node.js 中使用 async 函数的方法
Nov 20 #Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 #Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 #Javascript
使用DataTable插件实现异步加载数据
Nov 19 #Javascript
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP 采集心得技巧
2009/05/15 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
详解Python迭代和迭代器
2016/03/28 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
学生自我评语大全
2014/04/18 职场文书
少先队工作总结2015
2015/05/13 职场文书
高中美术教学反思
2016/02/17 职场文书
Python实现Hash算法
2022/03/18 Python