国际化支持

前端国际化流程

vue3 已内置国际化支持，如果需要国际化请升级至 vue3

前端目录

i18n
│  index.js		->国际化语言实现具体逻辑
│
├─lang  -> 系统菜单、按钮、一些系统常用的翻译文件
│      en.json		->英文翻译
│      zh-cn.json		->中文翻译
│      zh-tw.json		->繁体
│
└─pages
    ├─login		->登录页面翻译文件
    │      en.json
    │      zh-cn.json
    │      zh-tw.json
    │
    └─menu		->菜单页面翻译文件
            en.js
            zh-cn.js
            zh-tw.js

静态国际化

• src/i18n目录下存放国际化语言翻译文件 lang文件夹包含存放了系统常用的一些翻译，每种翻译对应一个文件
• pages文件夹存放具体页面的翻译文件，每个文件夹包含 3 个翻译文件 en.json、zh-cn.json、zh-tw.json
• index.js时国际化语言实现具体逻辑

index.js 文件内容

import { createI18n } from 'vue-i18n';
// import useAppStore from '@/store/modules/app'
import { listLangByLocale } from '@/api/system/commonLang';
import jsCookie from 'js-cookie';
const language = computed(() => {
  // return useAppStore().lang
  return jsCookie.get('lang') || 'zh-cn';
});

//导入常用翻译
import zhCn from './lang/zh-cn.json';
import en from './lang/en.json';
import zhTw from './lang/zh-tw.json';

//导入登录页翻译
import pageLoginCn from './pages/login/zh-cn.json';
import pageLoginEn from './pages/login/en.json';
import pageLoginTw from './pages/login/zh-tw.json';

//导入菜单页面
import pagemenuCn from './pages/menu/zh-cn';
import pagemenuEn from './pages/menu/en';
import pagemenuTw from './pages/menu/zh-tw';

//...导入你自己的业务翻译文件

const i18n = createI18n({
  // 全局注入 $t 函数
  globalInjection: true,
  fallbackLocale: 'zh-cn',
  locale: language.value, //默认选择的语言
  legacy: false, // 使用 Composition API 模式，则需要将其设置为false
  messages: {
    'zh-cn': {
      ...zhCn,
      ...pageLoginCn,
      ...pagemenuCn
      //...你自己的翻译文件
    },
    'zh-tw': {
      ...zhTw,
      ...pageLoginTw,
      ...pagemenuTw
      //...你自己的翻译文件
    },
    en: {
      ...en,
      ...pageLoginEn,
      ...pagemenuEn
      //...你自己的翻译文件
    }
    //... 在这里添加其他语言支持
  }
});

// 从后端获取翻译文件内容
const loadLocale = () => {
  listLangByLocale(language.value).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      i18n.global.mergeLocaleMessage(language.value, data);
    }
  });
};
loadLocale();
export default i18n;

动态国际化

打开菜单：系统管理->多语言设置，添加要翻译的内容，添加后可以直接使用 key 值

国际化使用

普通文本使用方式： {{ $t('login.title') }}
标签内使用方式：   :placeholder="$t('login.password')"
js内使用方式       this.$t('login.user.password.not.match'),vue3对应 proxy.$t('...')

后端国际化流程

.net8 分支已实现，自带的翻译文件在ZR.ServiceCore下面的 Resources目录

//构造函数注入
private readonly IStringLocalizer<SharedResource> _localizer;

public SysLoginService(IStringLocalizer<SharedResource> localizer)
{
    _localizer = localizer;
}

// 使用
string msg = _localizer["login_pwd_error"].Value;