國際化配置

前端的專案內已經集成了 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')