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

Question

似乎 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 一起使用，就像在以前的版本中一样？

原文由 volume one 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

…或纱线：

 yarn add vue-meta@alpha

1. 添加 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')

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

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

1. 在 App.vue 中设置默认元 <script>

Vue 3 香草：

    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 }
     })
   }

1. 覆盖每个组件中的元数据

Vue 3 香草：

    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' })))
     )
   }

也可以看看：

• “快速使用”（vue-meta next 分支）
• Vue 路由器示例（vue-meta next 分支）

原文由 charles-allen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

除了前面的答案之外，我还需要在我的 --- 中添加一个 transpileDependency vue.config.js ，因为我正在使用 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 ://stackoverflow.com/a/65844988/3433137

原文由 ElectRocnic 发布，翻译遵循 CC BY-SA 4.0 许可协议