如何在 Vue.js 3 中使用 Vue 3 Meta？

Posted 2023-02-22

【中文标题】如何在 Vue.js 3 中使用 Vue 3 Meta？

【英文标题】：How to use Vue 3 Meta with Vue.js 3?

【发布时间】：2021-05-19 12:55:42

【问题描述】：

Vue Meta 似乎已升级为使用名为 vue-3-meta 的新 npm 包来处理 Vue.js 3

在 Vue.js 3 之前，通过将 vue-meta 添加到 Vue 实例中很容易使用：

import Vue from 'vue'
import VueMeta from 'vue-meta'
 
Vue.use(VueMeta, 
  // optional pluginOptions
  refreshOnceOnNavigation: true
)

然而在 Vue.js 3 中，没有 Vue 实例；而是通过运行createApp 来创建应用程序，如下所示：

const app = createApp(App);
const router = createVueRouter();

app.use(router);
// need to make app use Vue-Meta here

我找不到vue-3-meta 的任何文档。 import VueMeta from 'vue-meta' 不再有效。

如何正确导入vue-3-meta 插件并像以前的版本一样将其与app 一起使用？

【问题讨论】：

谢谢@Eldar。但我仍然不明白metaManager 来自app.use(metaManager)。 App.vue 中的metaManager 在哪里？

对于那些来这里的人，我最终没有使用 vue-meta，而是使用了github.com/vueuse/head，这在 IMO 上效果更好。

【参考方案1】：

免责声明：vue-meta v3 仍处于 alpha 阶段！

这是我开始所需的最小实现：

将 vue-meta 更新到 v3（在 package.json 中）

- "vue-meta": "^2.4.0",
+ "vue-meta": "^3.0.0-alpha.7",

...或用纱线：

yarn add vue-meta@alpha

将metaManager 添加到 Vue 应用程序

import  createMetaManager  from 'vue-meta'

const app = createApp(App)
  .use(router)
  .use(store)
  .use(createMetaManager()) // add this line

await router.isReady()
app.mount('#app')

将<metainfo>添加到App.vue <template>（这也是我设置“标题模板”的地方）

<template>
  <metainfo>
    <template v-slot:title=" content "> content ? `$content | SITE_NAME` : `SITE_NAME` </template>
  </metainfo>
  <header />
  <router-view />
  <footer />
</template>

在 App.vue 中设置默认元 <script>Vue 3 vanilla：

import  useMeta  from 'vue-meta'

export default 
  setup () 
    useMeta(
      title: '',
      htmlAttrs:  lang: 'en', amp: true 
    )
  

或vue-class-component:

import  setup, Vue  from 'vue-class-component'
import  useMeta  from 'vue-meta'

export default class App extends Vue 
  meta = setup(() => useMeta(
    title: '',
    htmlAttrs:  lang: 'en', amp: true 
  )

覆盖每个组件中的元数据Vue 3 vanilla：

import  useMeta  from 'vue-meta'

export default 
  setup () 
    useMeta( title: 'Some Page' )
  

或vue-class-component:

import  computed  from '@vue/runtime-core'
import  setup, Vue  from 'vue-class-component'
import  useMeta  from 'vue-meta'

export default class SomePage extends Vue 
  meta = setup(() => useMeta(
    computed(() => ( title: this.something?.field ?? 'Default' )))
  )

另见：

"Quick Usage" (vue-meta next branch) Vue Router Example (vue-meta next branch)

【讨论】：

到目前为止，我已经设法理解了这一点。我的问题是，我们现在是否像第 2 版 中那样定义元信息（例如元：[ 、 、]、脚本：[ ] 等） 还是以另一种方式完成。跨度>

@Nwaiwulsidore - MetaSource hasn't been written yet 类型，但在 Github 中有 1 个相当广泛的示例；见：App.ts，Child.ts

感谢您的链接。我能够从 github 链接中获得一些理解。我想了解的另一个问题是父母和孩子之间的行为。在较旧的 vue-meta 中，来自子节点的元数据与父节点的元数据合并，但使用了“vmid”。在此版本中，当您在子项中指定它们时，它们似乎会被自动覆盖。我错了吗？

-。谢谢。它似乎更“聪明”。我试过了，它似乎工作。 “暂时”

@volumeone - 主要来自 GitHub 存储库中的 vue-router 示例（确保您正在查看“下一个”分支中的代码。一些来自自述文件（再次是“下一个”分支） ) & 从阅读任何看起来适用于 Vue 3 的问题。我仍然在计算元 + vue-class-component 中挣扎。

【参考方案2】：

metaManager 是从createMetaManager() 的vue-meta 创建的MetaManager 实例。

基于Vue 3 + Vue Router example for vue-meta，下面是一个示例用法：

import  createApp  from 'vue'
import  createMetaManager, defaultConfig, resolveOption, useMeta  from 'vue-meta'

const decisionMaker5000000 = resolveOption((prevValue, context) => 
  const  uid = 0  = context.vm || 
  if (!prevValue || prevValue < uid) 
    return uid
  
)

const metaManager = createMetaManager(
  ...defaultConfig,
  esi: 
    group: true,
    namespaced: true,
    attributes: ['src', 'test', 'text']
  
, decisionMaker5000000)

useMeta(
  
    og: 
      something: 'test'
    
  ,
  metaManager
)

createApp(App).use(metaManager).mount('#app')

【参考方案3】：

除了之前的答案，我还需要在我的vue.config.js 中添加一个transpileDependency，因为我使用的是vue-cli：

module.exports = 
  transpileDependencies: ['vue-meta']

否则，我会得到错误：

error  in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js

Module parse failed: Unexpected token (8:7170)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

感谢这个帖子指向我：https://***.com/a/65844988/3433137

【讨论】：

我找到了一个更好的解决方案，即删除 vue-meta 并使用 @vueuse/head github.com/vueuse/head