# 快速配置國際化文本 ## 例子 創建文件 `lang/zh_CN/components/modal.ts`的文件內容為 ~~~ { title: '標題'; } ~~~ 則直接使用 ``` const { t } = useI18n(); t('components.modal.title') ``` 獲取國際化文本。 ## 國際化配置代碼  ***** # 國際化原理講解 如果你使用的 vscode 開發工具，則推薦安裝 [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) 這個插件 ## I18n-ally 插件 安裝了該插件后，你的代碼內可以實時看到對應的語言內容  ## 配置默認語言 在 [src/settings/localeSetting.ts]內可以配置默認語言 ```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/] 可以配置具體的語言 ```bash # locales/lang/ # 中文語言 zh_CN: component: 組件相關 layout: 布局相關 routes: 路由菜單相關 sys: 系統頁面相關 en: 同上 ``` ### 語言導入邏輯說明 1. 初始化 在 [src/locales/setupI18n] 內的根語言文件可以看到 ```ts const defaultLocal = await import(`./lang/${locale}.ts`); ``` 這會導入 `src/locales/lang/{lang}.ts` 文件語言包，此文件會導入對應語言下的所有文件。 ```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` 的文件內容為 ```ts { title: '標題'; } ``` 則在使用的使用直接使用 `t('components.modal.title')` 進行獲取。 這樣做的好處在于更容易管理大型項目的多語言。如果不需要分模塊劃分，可以直接自己手動導入即可。 ## 使用 引入項目自帶的 `useI18n` **注意不要引入 vue-i18n 的 useI18n** ```ts import { useI18n } from '/@/hooks/web/useI18n'; const { t } = useI18n(); const title = t('components.modal.title'); ``` ## 切換語言 切換語言需要使用 [src/locales/useLocale.ts] ```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 實例上即可 ```ts // src/main.ts await setupI18n(app); app.mount('#app', true); ``` ### setupI18n 函數 代碼: [src/locales/setupI18n/] 如下所示，這里會先設置一個默認語言，默認語言可以設置在本地，也可以在這里等待接口返回默認語言 ```ts // 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 也是異步函數，只需等待接口返回響應的數據后，再進行設置即可 ```ts 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; } ```