如何使用 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 属性。有办法吗？

Answer 1

来源：Declaring language in HTML tag · Issue #388 · nuxt/nuxt.js

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

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'en'
    },
    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' }
    ]
  },
  ...
}

Answer 2

在 Nuxt 3 中输入组件

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

https://v3.nuxtjs.org/guide/features/head-management/

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

How to set lang attribute on html element with Nuxt?

javascript

html

vue.js

nuxt.js

vue-meta