首页 > 经验记录 > 在现在这个时间节点,使用Vue3生态请避免用 vue-meta 来处理HTML Head

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

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

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

项目仓库地址:https://github.com/nuxt/vue-meta

 

其实按理说这玩意既然是大组织维护(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了。

 

 

还有相关的Issue:

Vue meta Alpha8 doens’t generate meta tags properly #746

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

看起来还不错。

 

           


EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00