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

uniapp实现后端数据i18n国际化

article 2025/1/7 9:26:40

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 VUE3
  import { 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