最近在做一个官网，需要对显示进行中英切换。

以前只是知道做语言切换使用 i18n，不过一直没有上手用过。这次正好使用下试试。

当时做这个官网是想练手 Vue3 的，这里也是 Vue3 + i18n 的结合使用。

npm install vue-i18n

2、创建语言文件和目录结构

a、在 src 下创建 locales 目录

b、在 locales 下创建语言配置文件：zh-cn.ts 和 en.ts

c、在 locales 下创建 index.ts 文件

对应目录结构如图：

这里因为只要中英切换，所以文件结构比较简单（语言多的会单独建个 language 文件夹存放语言配置文件）

3、编辑语言配置文件

这里做一个简单的配置

zh-cn.ts 的配置

export default {
  common:{
    more:'查看更多'
  menus:{
    '/':'首页',
    Home:'首页',
    home:'首页',
    About:'关于',
    about:'关于',
en.ts 对应的配置
export default {
  common:{
    more:'More'
  menus:{
    '/':'home',
    Home:'Home',
    home:'home',
    About:'About',
    about:'about',
4、在 vue 中注册
注册前要对语言文件整合以及 createI8n，这些在 locales/index.ts 中完成，代码如下
import { createI18n } from 'vue-i18n'
// element-plus 中的语言配置
import elementEnLocale from 'element-plus/lib/locale/lang/en'
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn'
// 自己的语言配置
import enLocale from './en'
import zhLocale from './zh-cn'
// 语言配置整合
const messages = {
    ...enLocale,
    ...elementEnLocale
  'zh-cn':{
    ...zhLocale,
    elementZhLocale
// 创建 i18n
const i18n = createI18n({
  legacy: false,
  globalInjection:true,  // 全局模式，可以直接使用 $t
  locale: 'zh-cn',
  messages: messages
export default i18n
在 createI8n 时，globalInjection 的配置，关系到后面使用，这里注意下。.
接下来要在 main.ts 中注册
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './locales/index'
const app = createApp(App)
async function setupApp() {
    app.use(i18n)
    app.mount('#app')
setupApp()
准备工作都完成了，现在就是使用了。
　　a、在 html 中使用
// 配置了全局
<div>{{$t('menu.home')}}</div>
// 未配置全局
<div>{{t('menu.home')}}</div>
<script lang="ts" setup>
// 需要引入 t
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
　　b、ts 中使用
<script lang="ts" setup>
import i18n from '@/locales/index'
const t = i18n.global.t
const menuHome = { name: t('menus.home') }
</script>
到这里就可以正常使用了。
哎，怎么切换呢？下面就是中英切换的 HTML 和 js 代码
      <div class="right" @click="changeLanguage">
        <span :class="{'active':state.curLanguage === 'en'}">EN</span>&nbsp;&nbsp; —— &nbsp;&nbsp;<span :class="{'active':state.curLanguage === 'zh-cn'}">CN</span>
      </div>
<script lang="ts" setup>
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const state = reactive({
  curLanguage: 'zh-cn',
const changeLanguage = () => {
  state.curLanguage = state.curLanguage === 'zh-cn' ? 'en' : 'zh-cn'
  locale.value = state.curLanguage
</script>