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

本文主要介绍了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 小屋' }]
 }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue服务端渲染(SSR)初探

    详解vue服务端渲染(SSR)初探

    前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服

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

    本文主要介绍了Vue2 SSR渲染根据不同页面修改 meta,分享给大家,具体如下: 注意: 经过测试, vue-meta 会导致内存泄漏, 请慎用- 以现在 vue2 的 服务端渲染模式, 都是通过 webpack 生成 html 模版文件(或者直接在 server.js 里拼接), 然后通过fs.readFileSync 读取该文件, 再通过 res.end 输出, 这样就造成 meta 修改很麻烦 这时候我们可以借助 vue-meta 来管理, 下面以官方的vue-hackernews-2

  • 详解Vue2 SSR 缓存 Api 数据

    本文介绍了Vue2 SSR 缓存 Api 数据,分享给大家,具体如下: 1. 安装缓存依赖: lru-cache npm install lru-cache --dev 2. api 配置文件 config-server.js var LRU = require('lru-cache') let api if (process.__API__) { api = process.__API__ } else { api = process.__API__ = { api: 'http://loca

  • Nuxt.js开启SSR渲染的教程详解

    第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

  • vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能.分享给大家供大家参考,具体如下: 1.首先通过json.php把数据库给输出为json格式的数据 [ { "id":1, "resname":"百度", "resimg":"http://www.baidu.com/1.jpg", "resint":"2018-1-18", "re

  • vue如何动态修改meta的title

    vue如何动态修改meta的title

    目录 如何动态修改meta的title 动态修改路由的meta.title 需求 解决办法 如何动态修改meta的title 需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页query携带参数name到详情页实现动态title) @on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})" 列表页点击携带name到详情页职位详情页的title,并且赋值给route

  • 引用母版页后在page页面修改母版页控件的值的方法

    具体条件如下:1.首先该页面必须引用要修改的母版页:2.在page页面通过设置页面指令@MasterType创建对该母版页的强类型引用,指定生成强类型的文件的虚拟路径例如: 复制代码 代码如下: <%@ MasterType VirtualPath="~/Demo.Master" %> 3.在母版页添加一个public的属性,set值赋给母版页控件,例如: 复制代码 代码如下: public string PageTitle        {            set

  • 页面的缓存与不缓存设置及html页面中meta的作用

    HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务器端.本文讨论头信息 中带缓存控制信息的HTML页面(JSP/Servlet生成好出来的也是HTML页面)在中间缓存服务器中的缓存情况. HTTP协议中关于缓存的信息头关键字包括Cache-Control(HTTP1.1),Pragma(HTTP1.0),last-Modified,Expires等. HTTP1.0中通过Pragma 控制页面缓存,可以设置:Pragma或

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • 解决vue单页面修改样式无法覆盖问题

    当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局. 比如: <style scoped> .example { color: red; } </style> <template> <div class="example">hi<

  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

随机推荐