本篇主要是介绍vue-i18n在vue3项目中的简单用法，涉及vue-i18n的一些特性或者项目第三方组件的国际化，需要自行研究。 vue-i18n官网

第一步：安装

这里我们需要使用vue-i18n@next

npm i vue-i18n@next

第二步：创建本地语言包

在src下创建locales文件夹

en.ts

const en_US = {
    menu: {
        home: 'Home',
        components: 'Components',
        test: 'Test'
    }
}

export default en_US

zh.ts

const zh_CN = {
    menu: {
        home: '首页',
        components: '组件',
        test: '测试'
    }
}

export default zh_CN

index.ts

import { createI18n } from 'vue-i18n'

// 自定义国际化文件
import zh_CN from './zh'
import en_US from './en'

const i18n = createI18n({
    legacy: false, // Composition API 模式
    globalInjection: true, // 全局注册 $t方法
    // 默认语言
    locale: localStorage.getItem('locale') || 'zh_CN',
    // 语言库
    messages: {
        zh_CN: zh_CN,
        en_US: en_US
    }
});

// 将i18n暴露出去，在main.js中引入挂载
export default i18n;

第三步：全局引入

main.ts

import i18n from './locales'
app.use(i18n)

第四步：页面使用

...
<el-dropdown-menu>
    <el-dropdown-item @click="setLanguage('zh_CN')">简体中文</el-dropdown-item>
    <el-dropdown-item @click="setLanguage('en_US')">English</el-dropdown-item>
</el-dropdown-menu>
...

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

const setLanguage = (val: string) => {
    locale.value = val // 加上这句话就不用刷新页面
    localStorage.setItem('locale', val)
}
...

<span>{{ $t('menu.home') }}</span>