一、安装vue-i18n插件

// 使用 npm
npm install vue-i18n@9 
// 使用 yarn
yarn add vue-i18n@9

二、定义需要的语言包

在src下创建language/langs/zh.ts  为中文包

export default {
    HomePage: {
        City: "长沙市",
        Ranking: "排名",
        like: "猜你喜欢",
        personal: "个人排名",
        Daily: "日排行",
        Monthly: "月排行",
        Quarterly: "季度排行",
        Name: "姓名",
        Step: "步数",
        integral: "积分",
        Eight: "8",
        step3: "3000步",
        point: "3分",
        Topics: "专题",
        Look1: "看！中国体育天团夺冠东京奥运",
        athletic: "运动猿",
        comments: "1806跟帖",
    },
}    

在src下创建language/langs/en.ts  为英文包

export default {
    HomePage: {
        City: "City",
        Ranking: "Ranking",
        like: "like",
        personal: "personal",
        Daily: "Daily",
        Monthly: "Monthly",
        Quarterly: "Quarterly",
        Name: "Name",
        Step: "Step",
        integral: "integral",
        Eight: 'Eight',
        step3: "3000 step",
        point: "3point",
        Topics:"Topics",
        Look1: "look! Chinese sports team wins Tokyo Olympics",
        athletic : "athletic",
        comments: "1806comments",
    }, 
}   

三、组合语言包

在src下创建language/index.ts  

import { createI18n } from 'vue-i18n'
import zh from './langs/zh'
import en from './langs/en'

const messages = {
    zh,
    en
}

const i18n = createI18n({
    legacy:false,
    locale:localStorage.getItem('lang') || 'zh',
    messages
})

export default i18n

四、挂载实例对象

​
import { createApp } from 'vue';
const app = createApp(App);
app.use(i18n);

​

五、vue页面使用

两种基本方式的使用

<span v-t="'HomePage.Ranking'"></span>
<div>
    <span>{{ $t( "HomePage.like" )</span>
</div>

注：欢迎交流探讨  批评指正