國際化配置

前端的項目內已經集成了 Vue i18n，在請求時會自動根據當前語言向後端請求對應語言的文案，後端部分不在這裏講解有興趣可查看源碼。

前端目前支持 中文、繁體中文、英文，三種語言包。

插件推薦

• 如果你使用 vscode ，建議安裝 i18n Ally
• 如果你使用 webStorm ，建議安裝 Easy i18n

以上插件能很好幫助你完善語言包。

語言包定義

必看

Vue i18n 支持兩種語言包類型，全局語言包 和 局部語言包。其中局部語言包也叫本文件內的語言包，只用於 vue 擴展名的文件內， 全局的語言包支持 vue，tsx，jsx 類型文件。

語言包定義使用的 yaml 格式語法，比 json 寫起來要舒服很多

如果需要擴展其他語言，需要注意格式，不然會找不到定義的語言包。格式為：語言標識符[本語言名稱]

• en[English].yaml
• zh_CN[簡體中文].yaml
• zh_TW[繁體中文].yaml

全局語言包

全局語言包存放分為三種形式，它們都會被系統自動掃描引入

• src/locales 目錄下
• src/modules/<模塊名>/locales 目錄下
• src/plugins/<插件名>/locales 目錄下

注意事項

模塊 和 插件 下的全局語言包要和 src/locales 下的文件名一致，不然控制枱會出現找不到 key 的警告信息（很煩這個）。

局部語言包

項目內的所有 vue 文件都支持局部語言包，只需要在 vue 文件內定義 i18n 標籤即可，如下：

<i18n lang="yaml">
zh_CN:
  hello: 你好
zh_TW:
  hello: 你好
en:
  hello: hello
</i18n>

<script setup lang="ts">
</script>

<template>
</template>

<style>
</style>

使用

首先，完全可以自己手動引入 Vue i18n ，拿到 i18n 對象後，就可以使用 i18n 對象的 t 方法來獲取文案了，如下：

import { i18n } from 'vue-i18n'

// 全局模式
const { t } = i18n()

// 局部模式
const { t } = i18n({
  inheritLocale: true,
  useScope: 'local',
})

但是，前端項目內已經封裝好了獲取 i18n 對象的方法，只需要在 setup 函數內使用 useTrans() 方法即可，如下：

// 已自動引入 useTrans()
const trans = useTrans()

// useTrans() 會返回一個對象，裏面包含了全局和局部兩個對象：
// trans.globalTrans 和 trans.localTrans

trans.globalTrans('global.title')
trans.localTrans('title')

// 也可直接使用，默認先找全局的 key，如果找不到的話，會找局部的 key
useTrans('title')

除此之外，還有一個 useLocalTrans() 這個方法，它只會返回局部的 i18n 對象，並且需要手動引入，如下：

import useLocalTrans from '@/hooks/useLocalTrans'

// 只會尋找本文件內的 key
const t = useLocalTrans()

// 兩種使用方式
t('title')
useLocalTrans('title')