如何通过vue中的vue-i18n使用每种语言的多个文件？

在Vue中使用vue-i18n插件来实现国际化时，你可以通过配置多个语言文件来组织你的翻译内容

安装vue-i18n:

npm install vue-i18n

创建语言文件:

假设你有两种语言：英语（en）和法语（fr）。你可以为每种语言创建一个单独的JSON文件。

locales/en.json:

{
"message": {
"hello": "hello world"
}
}

locales/fr.json:

{
"message": {
"hello": "bonjour le monde"
}
}

配置vue-i18n:

在你的Vue应用中，你需要配置vue-i18n来加载这些文件。

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
locale: 'en', // 设置默认语言
fallbackLocale: 'en', // 设置备用语言
messages: {
en: require('./locales/en.json'), // 加载英语文件
fr: require('./locales/fr.json') // 加载法语文件
}
});

const app = createApp(App);

app.use(i18n);

app.mount('#app');

在组件中使用:

现在你可以在Vue组件中使用$t方法来获取翻译内容。

<template>
<div>{{ $t('message.hello') }}</div>
</template>

切换语言:

你可以通过改变i18n.locale的值来切换语言。

this.$i18n.locale = 'fr'; // 切换到法语

动态加载语言文件 (可选):

如果你有很多语言文件，并且不想在应用启动时全部加载，你可以使用i18n.global.loadLanguageAsync方法来动态加载语言文件。

const loadLanguageAsync = async (lang) => {
if (i18n.global.availableLocales.includes(lang)) {
await i18n.global.loadLanguageAsync(lang);
this.$i18n.locale = lang;
} else {
console.error(`Language ${lang} is not supported.`);
}
};

// 使用方法
loadLanguageAsync('fr');

这样，你就可以在Vue中使用vue-i18n并通过多个文件来组织每种语言的翻译内容了。