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
Mar 09 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
详解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
写出高质量的PHP程序
2012/02/04 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php实现递归的三种基本方式
2020/07/04 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
js的写法基础分析
2011/01/17 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
postman传递当前时间戳实例详解
2019/09/14 Python
softmax及python实现过程解析
2019/09/30 Python
python安装本地whl的实例步骤
2019/10/12 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python常用外部指令执行代码实例
2020/11/05 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
ORACLE第二个十问
2013/12/14 面试题
客户服务经理岗位职责
2014/01/29 职场文书
大学生年度个人总结
2015/02/15 职场文书
公积金贷款承诺书
2015/04/30 职场文书
员工福利申请报告
2015/05/15 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers