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

时间:2018-01-13 09:14:50

标签: javascript html vue.js nuxt.js vue-meta

使用文件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属性。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:7)

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

head支持htmlAttrs属性。它会将对象的每个键:值映射为属性:值

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' }
    ]
  },
  ...
}