uniapp实现后端数据i18n国际化

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

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

javascript 复制代码
//接口数据示例:

{
    "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

javascript 复制代码
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

2.uniapp内置的文本语言无法通过异步国际化,只能在根目录locale文件夹下提前配置好。

├── locale

│ ├── en.json

│ ├── zh-Hans.json

│ └── zh-Hant.json

相关推荐
eric*16886 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼22 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路43 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app