Vue2 SSR渲染根据不同页面修改 meta
本文主要介绍了Vue2SSR渲染根据不同页面修改meta，分享给大家，具体如下：
注意:
经过测试,vue-meta会导致内存泄漏,请慎用…
以现在vue2的服务端渲染模式,都是通过webpack生成html模版文件(或者直接在server.js里拼接),然后通过fs.readFileSync读取该文件,再通过res.end输出,这样就造成meta修改很麻烦
这时候我们可以借助vue-meta来管理,下面以官方的vue-hackernews-2.0为例,说下使用方法:
安装
Yarn
yarnaddvue-meta
NPM
npminstallvue-meta--save
准备插件
在router/index.js里添加
importVuefrom'vue'
importRouterfrom'vue-router'
importMetafrom'vue-meta'
Vue.use(Router)
Vue.use(Meta)
exportdefaultnewRouter({
//...
})
服务端渲染
在server-entry.js里添加
import{app,router,store}from'./app'
constisDev=process.env.NODE_ENV!=='production'
constmeta=app.$meta()//这行
exportdefaultcontext=>{
router.push(context.url)
context.meta=meta//这行
constss=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(//g,title.text())
indexHTML.head=indexHTML.head.replace(/
这里只选择替换title和description,如果还需要其他的,自行添加正则
注意:请保证模版中包含
xxxx
和
修改路由组件
在路由组件添加
exportdefault{
name:'frontend-index',
prefetch:fetchInitialData,
//添加以下代码
metaInfo(){
consttitle='M.M.F小屋-首页'
return{
title,
meta:[{vmid:'description',name:'description',content:title}]
}
}
}
或者这样
exportdefault{
name:'frontend-article',
prefetch:fetchInitialData,
//添加以下代码
metaInfo(){
consttitle=this.article.title
return{
title:title+'-M.M.F小屋',
meta:[{vmid:'description',name:'description',content:title+'M.M.F小屋'}]
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。