Nuxt i18n多语言

1. 安装 @nuxtjs/i18n

2. nuxt.config.js 配置

// /server_utils/i18n.js 目录是自定义的专门用于服务器端使用的js文件插件

module.exports = {
    strategy: 'no_prefix',
    defaultLocale: 'en',
    numberFormats,
    // 根据项目情况，酌情配置
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en.js'
      },
      {
        code: 'hi',
        iso: 'hi-in',
        name: 'हिन्दी',
        file: 'hi.js'
      },
      {
          code: 'es',
          iso: 'es-ES',
          name: 'Español',
          file: 'es.js'
      },
      {
        code: 'vi',
        iso: 'vi-VN',
        name: 'Tiếng Việt',
        file: 'vi.js'
      },
      {
        code: 'pt',
        iso: 'pt-PT',
        name: 'Português',
        file: 'pt.js'
      },
      {
        code: 'ru',
        iso: 'ru-RU',
        name: 'русский язык',
        file: 'ru.js'
      },
      {
        code: 'id',
        iso: 'id-ID',
        name: 'русский язык',
        file: 'id.js'
      },
      {
        code: 'de',
        iso: 'de-DE',
        name: 'Deutsch',
        file: 'de.js'
      },
      {
        code: 'fr',
        iso: 'fr-FR',
        name: 'français',
        file: 'fr.js'
      },
      {
        code: 'it',
        iso: 'it-IT',
        name: 'italiano',
        file: 'it.js'
      },
      {
        code: 'ms',
        iso: 'ms-MY',
        name: 'bahasa Melayu',
        file: 'ms.js'
      },
      {
        code: 'nl',
        iso: 'nl-NL',
        name: 'Nederlands',
        file: 'nl.js'
      },
      {
        code: 'tr',
        iso: 'tr-TR',
        name: 'Türkçe',
        file: 'tr.js'
      },
      {
        code: 'th',
        iso: 'th-TH',
        name: 'ภาษาไทย',
        file: 'th.js'
      },
      {
        code: 'bn',
        iso: 'bn-IN',
        name: 'বাংলা',
        file: 'bn.js'
      },
      {
        code: 'mr',
        iso: 'mr-IN',
        name: 'मराठी',
        file: 'mr.js'
      },
      {
        code: 'ta',
        iso: 'ta-IN',
        name: 'தமிழ்',
        file: 'ta.js'
      },
      {
        code: 'te',
        iso: 'te-IN',
        name: 'తెలుగు',
        file: 'te.js'
      },
      {
        code: 'ar',
        iso: 'ar-SA',
        name: 'العربية',
        file: 'ar.js'
      },
      {
        code: 'he',
        iso: 'he-IL',
        name: 'עִבְרִית',
        file: 'he.js'
      },
    ],
    lazy: true, // 按需使用，语言包会分包为独立的语言文件
    langDir: `~/lang/`,  // lang 目录下是个语言js包，自动会来这里取语言文件
    vueI18n: {
        fallbackLocale: 'en', // 匹配不到多语言时，使用en
    },
    differentDomains: false,
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'lang',
      alwaysRedirect: true
    }
}

/**
* nuxt.config.js 配置
**/

const i18n = require("./server_utils/i18n"); // i18n 国际化配置
// modules 部分
modules: [
    [
      '@nuxtjs/i18n',
       i18n
    ],
  ],

3. 代码使用方式：（client | server）都具备了在项目里 i18n的直接访问使用

例如：

async asyncData(app) {
  app.i18n .......
}

mounted() {
  this.$i18n.........
}

<div>{{ $t('somekey') }}