国际化配置

前端的项目内已经集成了 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')