Nuxt/Vue-Meta 使用中的常见问题与解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01091/article/details/148549289

Nuxt/Vue-Meta 使用中的常见问题与解决方案

vue-meta Manage HTML metadata in Vue.js components with SSR support 项目地址: https://gitcode.com/gh_mirrors/vu/vue-meta

前言

在 Nuxt.js 或 Vue.js 项目中使用 vue-meta 管理页面元信息时，开发者可能会遇到一些特殊场景下的问题。本文将深入分析两个典型问题及其解决方案，帮助开发者更好地理解和使用 vue-meta。

模板函数中的响应式变量问题

问题现象

当在 vue-meta 的 titleTemplate 或 meta 模板函数中直接使用响应式变量时，会发现变量变化不会触发模板更新。

{
  metaInfo() {
    return {
      titleTemplate: chunk => (
        this.locale === 'nl-NL'  // 这里直接使用this.locale将不会响应变化
        ? `${chunk} - Welkom`
        : `${chunk} - Welcome`
      )
    }
  }
}

问题原因

这是由于 Vue 的响应式系统工作原理决定的。Vue 通过依赖收集来确定哪些数据需要被追踪，而在箭头函数内部直接访问 this 上的属性时，Vue 无法正确建立依赖关系。

解决方案

在模板函数外部先将响应式变量赋值给局部变量，然后在函数内部使用这个局部变量：

{
  metaInfo() {
    const locale = this.locale  // 先赋值给局部变量
    return {
      titleTemplate: chunk => (
        locale === 'nl-NL'  // 使用局部变量
        ? `${chunk} - Welkom`
        : `${chunk} - Welcome`
      )
    }
  }
}

技术原理

这种方法之所以有效，是因为：

在 metaInfo 计算属性中访问 this.locale 时，Vue 能够正确建立依赖关系
当 locale 变化时，会触发 metaInfo 重新计算
模板函数中使用的局部变量 locale 是重新计算时获取的最新值

服务端渲染后的重复标签问题

问题现象

在使用服务端渲染时，可能会出现 meta 标签被渲染两次的情况：一次带有特定标识，另一次带有默认的标识。

问题原因

vue-meta 为了优化性能，只在检测到组件有 metaInfo 属性时才会初始化。如果所有组件都是通过 render 函数直接渲染的，vue-meta 在 beforeCreate 钩子中无法发现任何 metaInfo 配置，导致无法正确初始化服务端渲染应用。

const myComponent = {
  metaInfo: {
    title: 'title'
  }
}

export default App {
  name: 'myApp',
  render(h) {
    return h(myComponent)  // 这种渲染方式会导致问题
  }
}