分享：nuxt默认 Meta 标签

最新推荐文章于 2024-07-19 11:08:42 发布

万花丨凋

最新推荐文章于 2024-07-19 11:08:42 发布

阅读量847

点赞数

本文链接：https://blog.youkuaiyun.com/awseda/article/details/106423386

版权

nuxt 同时被 2 个专栏收录

45 篇文章

订阅专栏

vue

39 篇文章

订阅专栏

本文介绍了如何在Nuxt.js中设置默认的Meta标签，重点提及了在nuxt.config.js的head字段内配置，包括示例展示了自定义viewport和谷歌字体的设置，并提到了Nuxt.js使用hid作为元素key的特性。建议查阅vue-meta和Nuxt.js的HTML头部配置API以获取更多详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认 Meta 标签

Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了：
注意: Nuxt.js 使用 hid 而不是默认值 vmid 识别元素key
一个使用自定义 viewport 和谷歌字体的配置示例：

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

想了解 head 变量的所有可选项的话，请查阅 vue-meta 使用文档。
关于 Nuxt.js 应用 HTML 头部配置的更多信息，请参考 HTML 头部配置 API。
—————————————————————————————————————————————
链接：
1.https://vue-meta.nuxtjs.org/api/#metainfo-properties
2.https://zh.nuxtjs.org/api/configuration-head