国际化多语言切换

此包依赖最新的 后端基础Jar包

此包依赖最新，前端包

• vue 3.2.47
• pinia 2.0.35
• vxe-table 4.3.10
• element-plus 2.4.4

基础配置

• config 增加语言配置属性，这里支持五中语言的配置：简体中文（zh_CN）,英语（en_US）,泰语（th）,越南语（vi）,土耳其语（tr），填入其中任意两种或者多种就可以了
  src/config/index

export default {
  ...
+  i18nList: ["zh_CN", "en_US", "th","vi","tr"],
  ...
};

• main 文件中添加国际化初始内容，因为要同步加载翻译数据所以要先将main文件里面的逻辑放到 一个 async 函数中
  src/main

...
+import { i18n, initI18n, useI18nStore, ct, addI18nPage } from "yh-i18n";
+import Config from "@/config";
...
async functino main(){
+  addI18nPage(router);
+  await initI18n(Config.i18nList);
  const app = createApp(App);
+  app.use(i18n);
  app.use(createPinia());
  app.use(router);
  app.use(vant);
  app.use(plugin);
+  const i18nStore = useI18nStore();
+  i18nStore.setLocalList(Config.i18nList);
+  VXETable.setup({
+    i18n: (key, args) => ct(key, args),
+    translate: (key, args) => ct(key, args),
+  });
  router.isReady().then(() => {
    app.mount("#app");
  });
}
main()

业务使用

业务中入股有字段是编码需要翻译的，举例如下:
原代码

<template>
  <div>中国</div>
</template>

组合式接口组件的代码，选项式组件请自行研究或咨询前端

<template>
  <div>{{ ct("中国") }}</div>
</template>
<script setup>
import { ct } from "yh-i18n-m";
</script>

翻译管理

在开发环境中，可以自动收集要翻译的字段， 并且可以通过页面（http://{host}:{port}/#/translate 这个路径）对翻译内容进行管理