使用 i18n 和 Nuxt 时设置语言属性？

Question

使用 Nuxt，您可以在 nuxt.config.js 文件中设置语言 HTML 属性，如下所示：

module.exports = {
  head: {
    htmlAttrs: {
      lang: 'en-GB',
},
... etc etc

但是，如果您有一个多语言应用程序，您应该怎么做？有没有办法根据语言环境设置语言属性？

我认为document.documentElement.setSttribute('lang', 'language-code') 可能会起作用，但由于 nuxt 是在服务器端呈现的，它似乎无法访问 documentElement 对象。

谢谢

Answer 1

如果您使用的是 nuxt-i18n，您可以在默认布局中使用 addSeoAttributes: true 调用 $nuxtI18nHead。这将设置 lang 属性以及其他一些特定于语言的标题属性，以实现更好的 SEO。

export default {
    head() {
        return this.$nuxtI18nHead({ addSeoAttributes: true })   
    },
}

来源：https://i18n.nuxtjs.org/seo#improving-performance

Answer 2

也许我迟到了，但这就像你layouts/default.vue 中的这段代码一样简单：

export default {
    // other code...
    head() {
        return {
            htmlAttrs: {
                lang: this.$i18n.locale
            }
        }
    },
    // other code...
}

Answer 3

1. 安装 vue-i18n npm

 npm install vue-i18n

1. 在插件目录中创建一个插件并添加以下代码。例如：i18n.js

import Vue from 'vue' 

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({app}) => {
    app.i18n = new ueI18n({
        locate: 'ja',
        fallbackLocale: 'en',
        silentTranslationWarn: true,
        message: {
            'ja': require('~/locale/ja/translations.json'),
             'en': require('~/locale/en/translations.json')
        }
    })
}

1. 将此插件包含在您的 nuxt.config.js 文件中并设置语言

module.exports = {
    plugins: [{src: '~plugins/i18n.js', injectAs: 'i18n'}],
    head: {
        htmlAttrs: {
            lang: this.$i18n.locale,
        }
    }
}

4. translations.json 文件包含您的 json 格式翻译

{
    "hello": "Hello World"
}

5. 在组件文件中，您可以访问如下翻译

<p>{{ $t("hello") }}</p>

注意：我没有测试代码