如何在Vue中使用JSON文件与createI18n

Question

如果我有一个Vue项目，它的main.js文件看起来像这样:

import { createI18n } from "vue-i18n";
import { createApp } from 'vue'
import './styles/main.scss'
import App from './App.vue'
const i18n = createI18n({
locale: 'en', // set locale
fallbackLocale: 'en',   
legacy: false,
globalInjection: true,
messages: {
en: {
sample:{
item1: 'hello world'
}
}} // set locale messages
});
const app = createApp(App)
app.use(i18n)
app.mount('#app')

我如何编辑这个，使消息对象使用我的JSON翻译文件?基本上，我在我的locale文件夹中有翻译文件，一些例子是en-US.json和fr-FR.json。

因此，我想使用locale文件夹，而不是直接在消息对象中硬编码转换。这可能吗?

Answer 1

为翻译文件创建一个单独的文件夹是一个很好的做法，例如-locales。在这个文件夹中，您可以存储每种目标语言的json文件。

src/locales目录内容示例:

- index.js
- en.json
- fr.json
- uk.json

src/locales/index.js:

import en from "./en.json";
import fr from "./fr.json";
import uk from "./uk.json";
export const languages = {
en: en,
fr: fr,
uk: uk,
};

src/main.js:

import { createI18n } from "vue-i18n";
import { createApp } from "vue";
import "./styles/main.scss";
import App from "./App.vue";
import { languages } from "@/locales";
const i18n = createI18n({
locale: 'en', // set locale
fallbackLocale: 'en',
legacy: false,
globalInjection: true,
messages: languages
});
const app = createApp(App);
app.use(i18n);
app.mount('#app');

Answer 2

我终于明白了。下面的代码将从您在loadPath选项中指定的任何路径加载区域设置文件，并使用新的i18next-http-backend，因为i18next-xhr-backend已被弃用。这段代码将自动检测语言，并切换到正确的语言，如果你的locale文件名有这样的结构:en-US.json,en-PH.json,es-MX.json，等等。

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import i18nextHttpBackend from 'i18next-http-backend'
i18next.use(i18nextHttpBackend).use(LanguageDetector)
.init({
detection: {
caches: false
},
fallbackLng: {
default: ['en-US']
},
whitelist: [
'en',
'en-PH',
'en-US',
'es-MX'],
backend: {
loadPath: 'src/locales/{{lng}}.json'
},
load: 'currentOnly',
interpolation: { escapeValue: false },
saveMissing: true,
saveMissingTo: 'all'
});
export default function (app) {
app.use(I18NextVue, { i18next })
return app
}

然后在你的main.js:

中使用这段代码

const app = createApp(App)
i18next(app)
app.mount('#app')