「Vue — 插件」国际化vue-i18n

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

1import VueI18n from 'vue-i18n' //引入
2Vue.use(VueI18n) //通过插件方式挂载
3
4/*---------使用语言包-----------*/
5const i18n = new VueI18n({
6    locale: 'zh-CN', // 语言标识
7    //this.$i18n.locale // 通过切换locale的值来实现语言切换
8    messages: {
9        'zh-CN': require('./common/lang/zh'), // 中文语言包
10        'en-US': require('./common/lang/en') // 英文语言包
11    }
12});
13
14new Vue({
15    i18n,
16    router,
17    store,
18    render: h => h(App)
19}).$mount('#app')
20

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

1module.exports = {
2    index: {
3        banner: {
4            title: 'RheinKoester SAP',
5            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',
6            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.'
7        },
8        titleBox: {
9            box1: {
10                LTitle: "SAP products",
11                MTitle: 'SAP产品'
12            },
13            box2: {
14                LTitle: "PA Global Consultant Certification",
15                MTitle: 'PA全球顾问认证'
16            },
17            box3: {
18                LTitle: "Education and training resources",
19                MTitle: '教育培训资源'
20            },
21            box4: {
22                LTitle: "Education and training solutions",
23                MTitle: '教育培训解决方案'
24            }
25        }
26    }
27}

5：示例：zh.js中

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

6：使用示例

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

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