在项目中，我们有时候会遇到这样的需求，就是项目需要实现国际化处理，这里需要借助 vue-i18n

1、安装 vue-i18n

npm install vue-i18n@next

建立如下结构的文件：

en-us.ts 和 zh-cn.ts 分别用于存放英文语言包内容和中文语言包内容。

index.ts 文件代码如下：

import { createI18n } from 'vue-i18n'
import enUs from './lang/en-us'
import zhCn from './lang/zh-cn'
import store from '../store/index'
const language = store.getters.getLanguage

const i18n = createI18n({
  legacy: false,  // // 使用 Composition API 模式，则需要将其设置为false
  globalInjection: true,   // 全局注入 $t 函数
  locale: language,
  messages: {
    'en-us': enUs,
    'zh-cn': zhCn
  }
})
export default i18n

这里引入了 vuex 是为了方便在语言切换后，刷新页面重新获取切换后的语言包。

en-us.ts 文件代码如下：

export default {
  home: {
    title: 'TITLE',
    name: 'NAME',
    age: 'AGE'
  }
}

zh-cn.ts 代码如下：

export default {
  home: {
    title: '标题',
    name: '姓名',
    age: '年龄'
  }
}

vuex 部分文件结构如下：

其中 changeLanguage.ts 文件代码如下：

import localstore from '@/utils/localstoreUtils'   // 对localStorage进行了封装
import { Commit } from 'vuex'
interface IState {
  language: string
}
const language = {
  state: {
    language: 'en-us'
  },
  mutations: {
    setLanguage (state: IState, payload: IState): void {
      state.language = payload.language
    }
  },
  actions: {
    changeLanguage (context: {commit: Commit}, payload: IState): void {
      localstore.setItem('lang', payload.language)
      context.commit('setLanguage', payload)
    }
  },
  getters: {
    getLanguage (state: IState): any {
      const storeStr = localstore.getItem('lang')
      if (storeStr !== null && storeStr) {
        return storeStr
      }
      return state.language
    }
  }
}

export default language

index.ts 文件代码如下：

import { createStore } from 'vuex'
import language from './modules/changeLanguage'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    language
  }
})

然后在项目 src 文件夹下的 main.ts 中代码修改如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './networking/index'
import i18n from './locales/index'

createApp(App).use(store).use(router).use(i18n).mount('#app')

这样在其他地方就可以使用多语言。例如新建 language.vue 文件，代码如下：

<template>
  <div class="wrapper">
    多语言
    <p>标题：{{$t('home.title')}}</p>
    <p>姓名：{{$t('home.name')}}</p>
    <p>年龄：{{$t('home.age')}}</p>
    <p>当前语言：{{locales}}</p>
    <button @click="changeLanguage">按钮</button>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useStore } from 'vuex'
  import { useI18n } from 'vue-i18n'
  const store = useStore()
  const locales = ref(store.getters.getLanguage)
  const t = useI18n()

  function changeLanguage () {
    locales.value = locales.value === 'zh-cn' ? 'en-us' : 'zh-cn'
    t.locale.value = locales.value
    store.dispatch('changeLanguage', { language: locales.value })
  }

</script>

如果项目中引入了 vant 组件库，也需要做国际化处理，那么上面的 index.ts 文件则修改如下：

// vue-i18n所需要引入的
import { createI18n } from 'vue-i18n'
// 本地的文件夹
import enLocale from './en_us'
import zhLocale from './zh_cn'
// vant所需要引入的
import { Locale } from 'vant'
//vant中的文件夹  需要的语言和本地的语言保持一致
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'

const messages = {
  en: {
    ...enUS,
    ...enLocale
  },
  zh: {
    ...zhCN,
    ...zhLocale
  }
}
// 更新vant组件库本身的语言变化，支持国际化
function vantLocales(lang: any) {
  if (lang === 'en') {
    Locale.use(lang, enUS)
  } else if (lang === 'zh') {
    Locale.use(lang, zhCN)
  }
}
// 获取浏览器的语言
const lang = (navigator.language || 'en').toLocaleLowerCase()
const language = localStorage.getItem('language') || lang.split('-')[0] || 'zh'
localStorage.setItem('language', language)
const i18n = createI18n({
  //Not available in legacy mode 解决报错问题的配置项！！！
  legacy: false,
  // 全局注册 $t方法
  globalInjection: true,
  //设置初始化语言
  locale: language,
  // 设置备用语言
  fallbackLocale: 'en',
  messages
})
export { i18n, vantLocales }

此时，main.ts 中修改如下：

//引入上面配置好的语言文件
import { i18n, vantLocales } from './lang'
//对vant组件进行初始化语言设置
vantLocales(i18n.global.locale)

app.use(i18n)