i18next未在Vue项目中使用正确的语言

xt0899hw  于 2023-01-14  发布在  Vue.js
关注(0)|答案(1)|浏览(124)

我有一个名为i18n.js的文件,并试图在我的Vue + Vite应用程序中设置本地化。它的工作意义上说,翻译正在发生,但它似乎是我的设置是错误的,根据我在控制台日志中看到的。
我的浏览器文化是英语(美国),所以代码是en-US。我有一个locale位于src/locales/,locale文件的名称如下:

en-US.json
de-DE.json
en-AU.json
en-CA.json
en-GB.json
en-IE.json
en-IN.json
en-PH.json
es-MX.json
fr-CA.json
fr-FR.json
ja-JA.json
nl-NL.json
pt-BR.json
zh-CN.json

问题是使用的翻译文件是en-CA而不是en-US

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import i18nextXHRBackend from 'i18next-xhr-backend'

async function loadLocales (url, options, callback, data) {
  try {
    const theUrlPath = './locales/' + url + '.json'
    console.log(theUrlPath)
    const waitForLocale = await import(theUrlPath);

    callback(waitForLocale, { status: '200' })
  } catch (e) {
    console.log(e)
    callback(null, { status: '404' })
  }
}

i18next.use(i18nextXHRBackend).use(LanguageDetector)
  .init({
    detection: {
      caches: false
    },
    fallbackLng: {
      'in-ID': ['id-ID', 'id', 'en-US'],
      'zh-TW': ['zh-CN', 'zh', 'en-US'],
      'zh-HK': ['zh-CN', 'zh', 'en-US'],
      'zh-CN': ['zh-TW', 'zh', 'en-US'],
      'en-AT': ['en-GB', 'en-US'],
      'en-AU': ['en-GB', 'en-US'],
      'en-CA': ['en-GB', 'en-US'],
      'en-IN': ['en-GB', 'en-US'],
      'en-IE': ['en-GB', 'en-US'],
      'en-IT': ['en-GB', 'en-US'],
      'en-NL': ['en-GB', 'en-US'],
      'en-PH': ['en-GB', 'en-US'],
      'en-CH': ['en-GB', 'en-US'],
      cs: ['cs-CZ', 'en-US'],
      de: ['de-DE', 'en-US'],
      es: ['es-ES', 'en-US'],
      fr: ['fr-FR', 'en-US'],
      id: ['id-ID', 'en-US'],
      in: ['id-ID', 'id', 'en-US'],
      it: ['it-IT', 'en-US'],
      ja: ['ja-JA', 'en-US'],
      ko: ['ko-KR', 'en-US'],
      nl: ['nl-NL', 'en-US'],
      pt: ['pt-BR', 'en-US'],
      ru: ['ru-RU', 'en-US'],
      sk: ['sk-SK', 'en-US'],
      zh: ['zh-CN', 'en-US'],
      default: ['en-US']
    },
    interpolation: { escapeValue: false },
    whitelist: [
      'cs',
      'cs-CZ',
      'de',
      'de-DE',
      'en',
      'en-AT',
      'en-AU',
      'en-CA',
      'en-CH',
      'en-GB',
      'en-IE',
      'en-IN',
      'en-IT',
      'en-NL',
      'en-PH',
      'en-US',
      'es',
      'es-CO',
      'es-CR',
      'es-ES',
      'es-MX',
      'es-PR',
      'fr',
      'fr-CA',
      'fr-FR',
      'id',
      'id-ID',
      'in',
      'in-ID',
      'it',
      'it-IT',
      'ja',
      'ja-JA',
      'ko',
      'ko-KR',
      'nl',
      'nl-NL',
      'pt',
      'pt-BR',
      'ru',
      'ru-RU',
      'sk',
      'sk-SK',
      'zh',
      'zh-CN',
      'zh-HK',
      'zh-TW'],
    backend: {
      loadPath: '{{lng}}',
      parse: (data) => data,
      ajax: loadLocales
    },
    saveMissing: true,
    saveMissingTo: 'all',
    missingKeyHandler: (lng, ns, key, fallbackValue) => {
      console.log('missing locale key', lng, ns, key, fallbackValue)
    },
    missingInterpolationHandler: (text, value) => {
      console.log('missing locale interpolation', text, value)
    }
  });

export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

另外,在console.log(theUrlPath)这一行,出于某种原因,将打印出:

./locales/en-CA.json
./locales/en.json
./locales/en-GB.json
./locales/en-US.json

这就引出了几个问题:
1.为什么它要打印所有这些呢?我认为一旦找到了翻译(确实如此,因为en-CA的翻译显示在我的应用程序中),那么就不需要再次运行该函数了。
1.既然我的浏览器区域性设置为en-US,为什么en-CA排在第一位?

  1. en.json是从哪里来的?我没有一个名为en.json的文件,并且en不是任何其他语言的后备语言。
    请帮我澄清这一点。谷歌搜索并没有让我得到什么。
fivyi3re

fivyi3re1#

结果发现有一种文化保存在我的本地存储中,i18next正在使用它,所以只需清除我的本地存储,它就成功了。

相关问题