如何将Vue 3元与Vue.js 3结合使用？

Question

似乎Vue Meta已经升级到处理Vue.js 3，使用了一个名为vue-3-meta的新npm包。

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

Answer 1

免责声明：vue-meta v3仍在alpha中！

这是我需要开始的最低限度的实现：

1. 将vue-meta更新为v3 (在package.json中)

• "vue-meta"："^2.4.0"，+ "vue-meta"：“^3.0.0-字母7”， 带纱线的...or： 纱线添加vue-meta@alpha

1. 将metaManager添加到Vue应用程序 从'vue-meta‘const应用程序= createApp( app ) .use(路由器).use(商店) .use( createMetaManager ()) /添加这一行.use() router.isReady() app.mount('#app')
2. 将<metainfo>添加到App.vue <template> (这也是我设置“标题模板”的地方) {内容？${content} | SITE\_NAME：SITE\_NAME }}
3. 在App.vue <script>中设置默认元 Vue 3香草： 从'vue-meta‘导出默认值{ useMeta({ useMeta：''，htmlAttrs：{ lang：'en'，amp: true }) }导入{lang} 或者vue-class-component__： 从“Vue - class -component”导入{ useMeta }从“Vue - meta”导出默认类应用程序扩展Vue{meta= => useMeta({ title：‘，htmlAttrs：{ lang：’en，amp: true })
4. 覆盖每个组件中的元 Vue 3香草： 从“vue-meta”导出默认值{ useMeta({ title：'Some‘}) }导入{ useMeta }} 或者vue-class-component__： 从'@ Vue /runtime-core‘导入{ setup，从' Vue - class -component’导入{ useMeta }从'vue- meta‘导出默认类SomePage扩展Vue{meta= => useMeta(计算(()) => ({ title: this.something?.field？)))

另请参阅：

• 支部)
• 支部)

Answer 2

除了前面的答案，我还需要在我的vue.config.js中添加一个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

Answer 3

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

基于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')