在现在这个时间节点，使用Vue3生态请避免用 vue-meta 来处理HTML Head

如果你使用了vue-meta，那么你将变得不幸。

nuxt/vue-meta的Vue3适配版现在还处于 alpha 阶段，我使用的是Alpha 10。

其实按理说这玩意既然是大组织维护（nuxt），再加上Vue3都发布这么这么这么这么久了！我觉得他就算还在alpha ，但是在“基本使用”这一层面上应该是没什么问题的。

但很遗憾我想错了哈……

这东西有个严重的无法正常使用功能的bug。

meta标签的name无法定义，无论传什么都是显示 “meta”

比如说我要定义一个这种标签：

<meta name="hostname" content="baidu.com">

那么很遗憾，你定义不出来呢，不管你传啥，反正name显示的就是一个 meta。

useMeta({
    meta: [{
        name: "hostname",
        content: "baidu.com"
    }]
)

上面弄出来的结果会是这样的：

<meta name="meta" content="baidu.com">

你传一些什么其他的属性，嗨，居然都能正常。

比如： itemprop、 property ，你定义出来他确实可以正常渲染，但是name就不行。

但我们对SEO有一定了解的就知道， meta标签的name属性肯定是不能缺的，很多优化的点都依靠这个标签属性。你搞不了这个，那说实话你也没必要隔这儿搞什么SEO了。

Alpha8就有人遇到了相同的问题， 10还在，很难不流汗。

不过怎么说呢，这个bug还是有一个怪异的解决方法的。

我看了下vue-meta.d.ts的源码，看看他是咋定义的这玩意，勉强还是被我找到了个操作，

虽然用起来很奇怪但是姑且还是能用的，那就是自定义标签渲染逻辑，通过useMetaManager()的时候传入进去config属性。

我观察了一下vue-meta源码中定义，我这种方式也会出现两个问题

1、吃唯一key，非常容易定义重复

2、只能定义两种属性输出，比如上面案例的 name + content，我要是在想加一个 itemprop，那就不行了。

但再怎么说也还勉强能用吧。

我在上面issue的回复中给出了替代方式（步骤）和代码，这里就不贴了，有兴趣的直接去看就行。

如果你还没开始用vue-meta，那么最好是先别用它……

去看看别的库吧，Vue3的Head处理还有个： https://github.com/vueuse/head

看起来还不错。