如何使用vue-i18n更改属性lang html

Question

我想将html元素的属性从：

lang='en'

至

lang='jp'

当我使用vue-i18n包更改语言时。

我在nuxt.config.js中导入插件vue-i18n并添加属性：

 htmlAttrs: {
    lang: this.$i18n.locale,
 },

在head对象中但引发错误:无法读取未定义的属性“”$i18n“”

这是我的vue-i18n插件：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default ({ app, store }) => {
    app.i18n = new VueI18n({
        locale: store.state.i18n.locale,
        fallbackLocale: 'vi',
        messages: {
            en: require('~/locales/en.json'),
            vi: require('~/locales/vi.json'),
            jp: require('~/locales/jp.json'),
        },
    });
};

感谢您的阅读！

Answer 1

在nuxt.config.js文件的i18n配置部分，将seo属性设置为true，i18n模块将为您设置html lang属性。

i18n: {
   seo: true,
   ...
}

Nuxt i18n文档：https://nuxt-community.github.io/nuxt-i18n/seo.html#benefits

Answer 2

如果您考虑不在nuxt.config.js中使用htmlAttrs，而是在其他文件中使用htmlAttrs (例如，我在我的唯一布局中使用MainHeader.vue中的htmlAttrs)，则代码如下：

export default {
  name: 'MainHeader',
  head() {
    return {
      meta: [{
        hid: 'og:locale', property: 'og:locale', content: this.currentLocaleDecoding
      }],
      htmlAttrs: {
        lang: this.currentLocale ? this.currentLocale : 'en'
      }
    }
  },
...
  computed: {
    currentLocale() {
      return this.$i18n.locale
    },