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 相关文章推荐
javascript调试说明
Jun 07 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue实现打印功能的两种方法
Sep 07 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 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调用KyotoTycoon简单实例
2015/04/02 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP生成树的方法
2015/07/28 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python输出指定字符串的方法
2020/02/06 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
详解Python流程控制语句
2020/10/28 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
购房个人委托书范本
2014/10/11 职场文书
云台山导游词
2015/02/03 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python