1：npm install vue-i18n 2：在main.js中

import VueI18n from 'vue-i18n' //引入
Vue.use(VueI18n) //通过插件方式挂载

/*---------使用语言包-----------*/
const i18n = new VueI18n({
    locale: 'zh-CN', // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh-CN': require('./common/lang/zh'), // 中文语言包
        'en-US': require('./common/lang/en') // 英文语言包
    }
});

new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
}).$mount('#app')

3：在src文件夹下新建common文件夹新建lang文件夹新建en.js和zh.js文件，分别存放英文和中文语言包 4：示例：en.js中

module.exports = {
    index: {
        banner: {
            title: 'RheinKoester SAP',
            detail1: 'The SAP Business Intelligence Solution provides comprehensive business intelligence capabilities, giving users the ability to make effective and informed decisions based on solid data and analysis',
            detail2: 'All users, from high-end analysts to ordinary business users, have access to the information they need, with as little reliance on IT resources and developers as possible.'
        },
        titleBox: {
            box1: {
                LTitle: "SAP products",
                MTitle: 'SAP产品'
            },
            box2: {
                LTitle: "PA Global Consultant Certification",
                MTitle: 'PA全球顾问认证'
            },
            box3: {
                LTitle: "Education and training resources",
                MTitle: '教育培训资源'
            },
            box4: {
                LTitle: "Education and training solutions",
                MTitle: '教育培训解决方案'
            }
        }
    }
}

5：示例：zh.js中

module.exports = {
    index: {
        banner: {
            title: '莱茵科斯特 SAP',
            detail1: 'SAP商务智能解决方案提供全面的商务智能功能，赋予用户根据坚实的数据和分析结果来制定有效且明智决策的能力。',
            detail2: '从高端分析师到普通业务用户的所有用户都可访问他们所需的信息，尽可能不依赖 IT 资源和开发人员。'
        },
        titleBox: {
            box1: {
                LTitle: "SAP产品",
                MTitle: 'SAP products'
            },
            box2: {
                LTitle: "PA全球顾问认证",
                MTitle: 'PA Global Consultant Certification'
            },
            box3: {
                LTitle: "教育培训资源",
                MTitle: 'Education and training resources'
            },
            box4: {
                LTitle: "教育培训解决方案",
                MTitle: 'Education and training solutions'
            }
        }
    }
}

6：使用示例

<div class="title">{{$t('index.banner.title')}}</div>
v-for="(item,index) in $t('index.threeBox')"

参考链接：https://blog.csdn.net/qq_38543537/article/details/90696648