国际化

友情提示： 该章节，基于 《vue element plus admin —— 国际化》 的内容修改。 如果你使用的 vscode 开发工具，则推荐安装 I18n-ally 这个插件

# 1. I18n-ally 插件

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

# 2. 配置默认语言

在 src/store/modules/locale.ts 内配置 currentLocale 为其他语言。 查看代码 import { defineStore } from 'pinia' import { store } from '../index' import zhCn from 'element-plus/es/locale/lang/zh-cn' import en from 'element-plus/es/locale/lang/en' import { CACHE_KEY, useCache } from '@/hooks/web/useCache' import { LocaleDropdownType } from '@/types/localeDropdown' const { wsCache } = useCache() const elLocaleMap = { 'zh-CN': zhCn, en: en } interface LocaleState { currentLocale: LocaleDropdownType localeMap: LocaleDropdownType[] } export const useLocaleStore = defineStore('locales', { state: (): LocaleState => { return { currentLocale: { lang: wsCache.get(CACHE_KEY.LANG) || 'zh-CN', elLocale: elLocaleMap[wsCache.get(CACHE_KEY.LANG) || 'zh-CN'] }, // 多语言 localeMap: [ { lang: 'zh-CN', name: '简体中文' }, { lang: 'en', name: 'English' } ] } }, getters: { getCurrentLocale(): LocaleDropdownType { return this.currentLocale }, getLocaleMap(): LocaleDropdownType[] { return this.localeMap } }, actions: { setCurrentLocale(localeMap: LocaleDropdownType) { // this.locale = Object.assign(this.locale, localeMap) this.currentLocale.lang = localeMap?.lang this.currentLocale.elLocale = elLocaleMap[localeMap?.lang] wsCache.set(CACHE_KEY.LANG, localeMap?.lang) } } }) export const useLocaleStoreWithOut = () => { return useLocaleStore(store) }

# 3. 语言文件

在 src/locales 可以配置具体的语言。 目前项目中的语言都是没有拆分的，全部放一起，后续会考虑拆分出来，比较好维护。

# 4. 语言导入逻辑说明

在 src/plugins/vueI18n/index.ts 内可以看到 const defaultLocal = await import(../../locales/${locale.lang}.ts) 这会导入 src/locales 文件语言包。

# 5. 使用

引入项目自带的 useI18n注意不要引入 vue-i18n 的 useI18n import { useI18n } from '/@/hooks/web/useI18n' const { t } = useI18n() const title = t('common.menu')

# 6. 切换语言

切换语言需要使用 src/hooks/web/useLocale.ts import { useLocale } from '@/hooks/web/useLocale' const { changeLocale } = useLocale() changeLocale('en')

# 7. 新增新语言

# 7.1 语言文件

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

# 7.2 新增语言

目前项目自带的语言只有 zh_CN 和 en 两种 如果需要新增，按以下操作即可

1. 在 src/locales 下语言文件
2. 在 types/global.d.ts 给 LocaleType 添加对应的类型
3. 在 src/store/modules/locale.ts localeMap 中添加对应语言

# 8. 远程读取语言数据

目前项目会在 src/main.ts 内等待 setupI18n 这个函数执行完之后才会渲染界面，所以只需在 setupI18n 内的 createI18nOptions 发送 ajax 请求，将对应的数据设置到 i18n 实例上即可。 const createI18nOptions = async (): Promise => { const localeStore = useLocaleStoreWithOut() const locale = localeStore.getCurrentLocale const localeMap = localeStore.getLocaleMap // 这里改为远程请求即可。 const defaultLocal = await import(../../locales/${locale.lang}.ts) const message = defaultLocal.default ?? {} setHtmlPageLang(locale.lang) localeStore.setCurrentLocale({ lang: locale.lang // elLocale: elLocal }) return { legacy: false, locale: locale.lang, fallbackLocale: locale.lang, messages: { [locale.lang]: message }, availableLocales: localeMap.map((v) => v.lang), sync: true, silentTranslationWarn: true, missingWarn: false, silentFallbackWarn: true } }

# 8.1 useLocale

代码: src/hooks/web/useLocale.ts 当手动切换语言的时候会触发 useLocale 函数，useLocale 也是异步函数，只需等待接口返回响应的数据后，再进行设置即可 export const useLocale = () => { // Switching the language will change the locale of useI18n // And submit to configuration modification const changeLocale = async (locale: LocaleType) => { const globalI18n = i18n.global // 改为远程获取 const langModule = await import(../../locales/${locale}.ts) globalI18n.setLocaleMessage(locale, langModule.default) setI18nLanguage(locale) } return { changeLocale } } .pageB img{width:80px!important;} .wwads-horizontal .wwads-text, .wwads-content .wwads-text{line-height:1;} CRUD 组件 IDE 调试 ← CRUD 组件 IDE 调试→ Theme by Vdoing | Copyright © 2019-2026 芋道源码 | MIT License

• 跟随系统
• 浅色模式
• 深色模式
• 阅读模式 × .windowRB{ padding: 0;} .windowRB .wwads-img{margin-top: 10px;} .windowRB .wwads-content{margin: 0 10px 10px 10px;} .custom-html-window-rb .close-but{ display: none; }