I have a file called i18n.js
and am trying to setup localization in my Vue + Vite app. It's working in the sense that a translation is taking place, but it appears that my setup is wrong based on what I am seeing in the console log.
So my browser culture is English (United States) so the code is en-US
. I have a locales located here src/locales/
with the locales files having names like this:
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
The problem is that the translation file that is getting used is en-CA
instead of en-US
. This is the code:
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
}
Also, on the line that says console.log(theUrlPath)
, for some reason, this prints out:
./locales/en-CA.json
./locales/en.json
./locales/en-GB.json
./locales/en-US.json
So this brings up a few questions:
en.json
coming from? I don't have a file named that and en
is not a fallback language for any of the other languages.Please help clarify this for me. Googling has gotten me no where.
Turns out there was somehow a culture that was saved in my local storage and i18next was using that so just had to clear me local storage and it worked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.