nuxt.js - 如何使用 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