vue中使用i18next实现根据动态数据国际化翻译

下载npm包

	npm install i18next i18next-vue i18next-browser-languagedetector

i18n.js文件

import i18next from 'i18next';
import { useLanguageStore } from '@/store/langStore'; // 假设你使用的是 Pinia 或 Vuex

const initI18n = (resources) => {
    // 从 store 获取当前语言
    const languageStore = useLanguageStore();
    const currentLang = languageStore.language || 'zh'; // 默认语言为中文

    return i18next.init({
        lng: currentLang,
        fallbackLng: 'zh', // 后备语言
        resources,
    });
};

export { initI18n, i18next };

main.js

import i18next from "i18next";
import I18NextVue from "i18next-vue";
app.use(I18NextVue, { i18next })

pinia文件 langStore.js

import { defineStore } from 'pinia';
import i18next from 'i18next';

export const useLanguageStore = defineStore('language', {
    state: () => ({
        language: 'zh', // 默认语言
    }),
    actions: {
        setLanguage(lang) {
            this.language = lang;
            i18next.changeLanguage(lang); // 更新 i18next 的语言
        },
    },
});

vue页面使用

import { initI18n, i18next } from '@/utils/i18n';
import { useLanguageStore } from '@/store/langStore';  //pinia获取语言

// 监听语言变化并重新获取数据
watch(() => useLanguageStore().language, (newLang, oldLang) => {
    console.log("newLang", newLang)
    if (newLang !== oldLang) {
        getCultureInfo();
    }
}
);

const getCultureInfo = async () => {
    const res = await getCulture()
    // console.log(res.data.result)
    console.log("res", res.data)

    const resources = {
        zh: {
            translation: res.data.zh || {}
        },
        en: {
            translation: res.data.en || {}
        }
    }
    initI18n(resources)

    let dataStore = i18next.getResourceBundle(i18next.language, 'translation')
    //dataStore 会返回当前语言对应的数据
 
 注： 数据结构设计时 应返回对应的中英文数据字段 如返回数据结构为  
   {
      en: {字段名，字段名},
      zh: {字段名，字段名}
   } 

 }