Vue3 使用vue-i18n

1. 安装i18n依赖

npm install vue-i18n
或
yarn add vue-i18n

2. 新建文件引入i18n，初始化实例并且在main文件中使用

import { createI18n } from 'vue-i18n'
// 语言包文件
import zhLocal from "./package/zh";
import enLocal from "./package/en";


// 导入语言文件 
const messages = {
  zh: { ...zhLocal },
  en: { ...enLocal }
}

export let i18n;
// 提供install方法，给vue.use进行创建实例
export const setupI18n = {
  install(app) {
    const langStore = useLangStroe()
    i18n = createI18n({
      globalInjection: true, //如果设置true, $t() 函数将注册到全局
      legacy: false, //如果想在composition api中使用需要设置为false,
      locale: langStore.lang === 'zh-CN' ? 'zh' : langStore.lang,
      fallbackLocale: 'en',
      messages  // set locale messages
    })
    app.use(i18n)
  }
}

main.ts文件中引入

import { setupI18n } from '@/lang'
const app = createApp(App)
app.use(setupI18n)
app.mount('#app')

3. 使用方法

1. 
   
2. 在vue模板中直接使用，例如{{ $t('') }}
3. 在<script setup lang='ts'>中使用

   import { useI18n } from 'vue-i18n';
   const { t } = useI18n();
   
   t('name')

4. 切换语言

import { useI18n } from 'vue-i18n';
const { locale } = useI18n();

locale.value = 'en'