0

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

 2 years ago
source link: https://www.skypyb.com/2022/04/jishu/1973/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

在现在这个时间节点，使用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">
<meta name="hostname" content="baidu.com">

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

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

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

<meta name="meta" 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

看起来还不错。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK