Skip to content
V3-Admin
指南 组件

国际化

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

I18n-ally 插件

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

配置默认语言

在 src/settings/locale.setting.js 内配置默认语言

export const LOCALE = {
  ZH_CN: 'zh-CN',
  EN_US: 'en',
}
export const currentLocale = () => {
  const _locale = navigator.language || navigator.userLanguage
  if (Object.values(LOCALE).includes(_locale)) return _locale
  return LOCALE.ZH_CN
}


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


// 语言列表
export const localeList = [
  {
    text: '简体中文',
    event: LOCALE.ZH_CN,
  },
  {
    text: 'English',
    event: LOCALE.EN_US,
  },
]

配置

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

语言文件

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

locales/lang/
# 中文语言
zh-CN:
  common: 公用配置
  component: 组件相关
  layout: 布局相关
  routes: 路由菜单相关
  sys: 系统页面相关


en: 同上

语言导入逻辑说明

  1. 初始化

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

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

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

import { genMessage } from '../helper'
import antdLocale from 'cosine-fee/es/locale/zh-CN';


const modules = import.meta.globEager('./zh-CN/**/*.js')
export default {
  message: {
    ...genMessage(modules, 'zh-CN'),
    antdLocale,
  },
}

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

例:

lang/zh-CN/components.js 的文件内容为

export default {
  app: {
    title: '暂无搜索结果',
  }
}

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

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

使用

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

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


const { t } = useI18n();


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

切换语言

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

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


const { changeLocale } = useLocale();


changeLocale('en');

新增

语言文件

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

新增语言

目前项目自带的语言只有 zh-CN 和 en 两种

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

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

远程读取语言数据

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

src/main.js
await setupI18n(app);


app.mount('#app');

setupI18n 函数

代码: src/locales/setupI18n.js

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

async function createI18nOptions() {
  const localeStore = useLocaleStoreWithOut()
  const locale = localeStore.getLocale
  const defaultLocal = await import(`./lang/${locale}.js`)
  const message = defaultLocal.default?.message ?? {}


  setHtmlPageLang(locale)
  setLoadLocalePool((loadLocalePool) => {
    loadLocalePool.push(locale)
  })


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


export async function setupI18n(app) {
  const options = await createI18nOptions()
  i18n = createI18n(options)
  app.use(i18n)
}

changeLocale 函数

代码: src/locales/useLocale.js

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

  async function changeLocale(locale) {
    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}.js`)).default
    if (!langModule) {
      return
    }


    const { message } = langModule


    globalI18n.setLocaleMessage(locale, message)
    loadLocalePool.push(locale)


    setI18nLanguage(locale)
    return locale
  }