如何使用Nuxt在HTML元素上设置lang属性？

Question

通过使用文件nuxt.config.js，可以自定义head内容以添加一些元信息或其他内容：

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'awesome title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  ...
}

但是我在文档中找不到设置html元素属性的任何方法——我想设置lang属性。有什么办法可以做到吗？

但我在文档中找不到如何在html元素上设置属性的信息——我想要设置lang属性，有什么方法吗？

- rocambille

---

尝试在HTML标签中声明语言：Issue #388 · nuxt/nuxt.js - yuriy636

@yuriy636，它起作用了。你能把它变成一个答案，这样我就可以接受它了吗？ - rocambille

Answer 1

来源: 在HTML标签中声明语言 · Issue #388 · nuxt/nuxt.js

head 支持 htmlAttrs 属性。它将把对象的每个 key:value 映射为 attribute:value

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'en'
    }
  }
}

当使用i18n和Nuxt时，如何设置语言属性？（参考链接）

- yuriy636

---

如果你正在使用不同的语言环境，该怎么办？ - JMK

这也适用于Body bodyAttrs和Head headAttrs。 - Dan

是的，就像@JMK所说的，如果使用不同的区域设置与i18n呢？ - Vinny

@Vinny 看起来他为此创建了一个单独的问题。请查看 https://dev59.com/A6vka4cB1Zd3GeqPz90U - yuriy636

Answer 2

在 Nuxt 3 的组件中声明类型

<script setup>
useHead({
  htmlAttrs: {
    lang: 'en',
    style: 'font-size: 13px'
  }
})
</script>

https://v3.nuxtjs.org/getting-started/seo-meta/

- Daniel

---

谢谢！这在 https://v3.nuxtjs.org/getting-started/seo-meta/ 中没有记录。 - caiohamamura

已经提到了，但现在显示有错误 https://github.com/nuxt/framework/issues/9178 - Daniel

我看到，他们把链接改成了文档链接，现在有两种不同的方法（在组件中和在nuxt配置中），四月份时还没有像今天这样通过全局方式添加的选项。 - Daniel

Answer 3

将htmlAttrs添加到nuxt.config.js。

export default defineNuxtConfig({
    app: {
        head: {
            htmlAttrs: {
                lang: 'en',
            },
            title: 'title',
            charset: 'utf-8',
            meta: [],
            link: [],
        }
    },
})

- bilal