安装

npm install vue-i18n@9
或
yarn add vue-i18n@9

初始化国际化信息

为了方便管理我们新建一个lang文件夹作为专门的国际化专用，并在lang文件夹下新建zh跟en两个文件夹。

// ./lang/zh/index.ts
export default {
    statusbar: {
        uncommit: '未提交',
        unpush: '未推送'
    }
}

// ./lang/en/index.ts
export default {
    statusbar: {
        uncommit: "haven't commit",
        unpush: "haven't unpush"
    }
}

在Vue-I8n中，支持多级语言分类，这里创建了一级，在vue文件中使用$t(statusbar.commit)来触发翻译。
我们再在lang下初始化国际信息

// ./lang/idnex.ts
import { createI18n } from 'vue-i18n'
import CN from './zh-cn'
import EN from './en'

const messages =  {
    zh: CN,
    en: EN
}

const i18n = createI18n({
    locale: 'en',  // 默认语言
    legacy: false, //用于区分是否使用组合式api，v3使用要设为false
    globalInjection: true,
    messages,
})
console.log(messages)
export default i18n

导入插件

最后我们在main.ts中导入插件即可正常使用

import { createApp } from 'vue'
import App from './App.vue'
import i18n  from './lang'

const app = createApp(App)
app.use(i18n)
app.mount('#app')