当前位置：首页 > news >正文

uniapp实现后端数据i18n国际化

news 2025/7/8 10:14:04

1.在main.js配置请求获取到数据再设置到i18n中，

我这里是通过后端接口先获取到一个多个数据的的json链接，通过链接再获取数据，拿到数据后通过遍历的方式设置i18n

//接口数据示例：{"vi": "http://localhost:8899/_data/storage/languages/vi.json","zh_CN": "http://localhost:8899/_data/storage/languages/zh_CN.json","pt": "http://localhost:8899/_data/storage/languages/pt.json"
}

main.js

import App from './App'
import { getLanguageJson } from "@/api/index.js";// 初始化一个对象来存储语言数据
const i18nData = {};// 设置 i18n 配置
const i18nConfig = {locale: uni.getLocale(), // 获取当前设备语言messages: uni.getStorageSync("i18nData") || {}, // 从缓存获取语言数据silentTranslationWarn: true,missingWarn: false,silentFallbackWarn: true,fallbackWarn: false
};// 异步加载所有语言文件
const loadLanguages = async () => {try {const res = await getLanguageJson();const obj = res.data;console.log(obj);// 使用 Object.entries 生成语言文件请求的 Promise 数组const promises = Object.entries(obj).map(([lang, url]) => new Promise((resolve) => {uni.request({url: url,method: 'GET',success: (res) => {if (res.statusCode === 200 && res.data) {i18nData[lang] = res.data;console.log(`语言包 ${lang} 加载成功`);} else {console.error(`语言包 ${lang} 加载失败`);i18nData[lang] = {}; // 设置为空对象以避免错误}resolve();},fail: (err) => {console.error(`语言包 ${lang} 加载失败`, err);i18nData[lang] = {}; // 设置为空对象以避免错误resolve();}});}));// 等待所有 Promise 完成await Promise.all(promises);// 加载完语言包后保存到本地缓存uni.setStorageSync("i18nData", i18nData);} catch (error) {console.error("获取语言包列表失败", error);}
};// #ifdef VUE3import { createSSRApp } from 'vue'import { createI18n } from 'vue-i18n'var i18n = createI18n(i18nConfig);// 拿到数据后加载语言包loadLanguages().then(() => {Object.entries(i18nData).forEach(([lang, messages]) => {i18n.global.setLocaleMessage(lang, messages);console.log(`语言包 ${lang} 加载成功`);});});export function createApp() {const app = createSSRApp(App);app.use(i18n);return {app};}// #endif