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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
javascript 快速排序函数代码
May 30 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
Vue组件开发初探
Feb 14 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
用vue写一个日历
Nov 02 Javascript
用JS实现飞机大战小游戏
Jun 09 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python实现通讯录功能
2018/02/22 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python接口测试get请求过程详解
2020/02/28 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python csv文件记录流程代码解析
2020/07/16 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
美容师的职业规划书
2013/12/27 职场文书
销售个人求职信范文
2014/04/28 职场文书
平面设计专业求职信
2014/08/09 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书