Nuxt i18n多語言

1. 安裝 @nuxtjs/i18n

2. nuxt.config.js 配置

// /server_utils/i18n.js 目錄是自定義的專門用于服務(wù)器端使用的js文件插件

module.exports = {
    strategy: 'no_prefix',
    defaultLocale: 'en',
    numberFormats,
    // 根據(jù)項目情況,酌情配置
    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') }}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容