ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

Vue-Vben-Admin国际化

2024-02-07 11:15:00  阅读:37  来源: 互联网

标签:


如果你使用的 vscode 开发工具,则推荐安装 I18n-ally 这个插件

#I18n-ally 插件

安装了该插件后,你的代码内可以实时看到对应的语言内容

#配置默认语言

在 src/settings/localeSetting.ts 内可以配置默认语言

export const LOCALE: { [key: string]: LocaleType } = {
  ZH_CN: 'zh_CN',
  EN_US: 'en',
};

export const localeSetting: LocaleSetting = {
  // 是否显示语言选择器
  showPicker: true,
  // 当前语言
  locale: LOCALE.ZH_CN,
  // 默认语言
  fallback: LOCALE.ZH_CN,
  // 允许的语言
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};

// 配置语言列表
export const localeList: DropMenu[] = [
  {
    text: '简体中文',
    event: 'zh_CN',
  },
  {
    text: 'English',
    event: 'en',
  },
];

#配置

在 src/locales/setupI18n.ts 内引入的 i18n 这个无需修改

#语言文件

在 src/locales/lang/ 可以配置具体的语言

# locales/lang/

# 中文语言
zh_CN:
  component: 组件相关
  layout: 布局相关
  routes: 路由菜单相关
  sys: 系统页面相关

en: 同上

#语言导入逻辑说明

  1. 初始化

在 src/locales/setupI18n 内的根语言文件可以看到

const defaultLocal = await import(`./lang/${locale}.ts`);

这会导入 src/locales/lang/{lang}.ts 文件语言包,此文件会导入对应语言下的所有文件。

import { genMessage } from '../helper';
import antdLocale from 'ant-design-vue/es/locale/zh_CN';
import momentLocale from 'moment/dist/locale/zh-cn';

const modules = import.meta.globEager('./zh_CN/**/*.ts');
export default {
  message: {
    ...genMessage(modules, 'zh_CN'),
    antdLocale,
  },
  momentLocale,
  momentLocaleName: 'zh-cn',
};

并将其按相应的目录结构转化为多层级的

例:

lang/zh_CN/components/modal.ts 的文件内容为

{
  title: '标题';
}

则在使用的使用直接使用 t('components.modal.title') 进行获取。

这样做的好处在于更容易管理大型项目的多语言。如果不需要分模块划分,可以直接自己手动导入即可。

#使用

引入项目自带的 useI18n 注意不要引入 vue-i18n 的 useI18n

import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

const title = t('components.modal.title');

#切换语言

切换语言需要使用 src/locales/useLocale.ts

import { useLocale } from '/@/locales/useLocale';

const { changeLocale } = useLocale();

changeLocale('en');

#新增

#语言文件

在 src/locales/lang/ 增加对应语言的文件即可

#新增语言

目前项目自带的语言只有 zh_CN 和 en 两种

如果需要新增,按以下操作即可

  1. 在 src/locales/lang/ 下新增相应的语言目录及语言文件并引入 引入 ant-design-vue 和 moment 对应的语言包
  2. 在 types/config.d.ts 内加上预览类型定义
  3. 在 src/settings/localeSetting.ts 修改语言配置

#远程读取语言数据

目前项目会在 src/main.ts 内等待 setupI18n 这个函数执行完之后才会渲染界面,所以只需在 setupI18n 内发送 ajax 请求,将对应的数据设置到 i18n 实例上即可

// src/main.ts
await setupI18n(app);

app.mount('#app', true);

#setupI18n 函数

代码: src/locales/setupI18n/

如下所示,这里会先设置一个默认语言,默认语言可以设置在本地,也可以在这里等待接口返回默认语言

// setup i18n instance with glob
export async function setupI18n(app: App) {
  const options = await createI18nOptions();
  i18n = createI18n(options) as I18n;
  app.use(i18n);
}

async function createI18nOptions(): Promise<I18nOptions> {
  const locale = localeStore.getLocale;

  // 这里改成接口获取
  const defaultLocal = await import(`./lang/${locale}.ts`);
  const message = defaultLocal.default?.message ?? {};

  return {
    legacy: false,
    locale,
    fallbackLocale: fallback,
    messages: {
      [locale]: message,
    },
    availableLocales: availableLocales,
    sync: true,
    silentTranslationWarn: true,
    missingWarn: false,
    silentFallbackWarn: true,
  };
}

#changeLocale 函数

代码: src/locales/useLocale/

当手动切换语言的时候会触发 useLocale 函数,useLocale 也是异步函数,只需等待接口返回响应的数据后,再进行设置即可

async function changeLocale(locale: LocaleType) {
  const globalI18n = i18n.global;
  const currentLocale = unref(globalI18n.locale);
  if (currentLocale === locale) return locale;

  if (loadLocalePool.includes(locale)) {
    setI18nLanguage(locale);
    return locale;
  }
  // 这里改成接口获取
  const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule;
  if (!langModule) return;

  const { message, momentLocale, momentLocaleName } = langModule;

  globalI18n.setLocaleMessage(locale, message);
  moment.updateLocale(momentLocaleName, momentLocale);
  loadLocalePool.push(locale);

  setI18nLanguage(locale);
  return locale;
}

标签:
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[[email protected]]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有