【VUE - 工具 - vue- i18n】02、使用vue i18n进行中英文等多语言切换的方案

前言

由于项目实现存在多语言切换的需求，所以当前选择使用vuei18n这个库来实现。当前记录下实现过程以便后续查阅。

步骤

1、安装

yarn add vue-i18n -S

2、创建language

1、在目录中找个位置新建language文件夹（我在utils工具文件夹内部创建）
2、在language内部新建cn.js|en.js|hk.js（具体语言环境包 根据实际需求创建对应文件）

// cn.js
export default {'loginModule': { // 登录模块'login': '登录'}
}
// en.js
export default {'loginModule': { // 登录模块'login': 'login'}
}
// hk.js
export default {'loginModule': { // 登录模块'login': '登录'}
}

3、在language内部新建index.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './en' // 对应语言文件，已由第二步创建
import cnLocale from './cn' // 对应语言文件，已由第二步创建
import hkLocale from './hk' // 对应语言文件，已由第二步创建
import localstore from '@/utils/localstore' // 经过封装的localstore存取器，可以直接使用原生apiVue.use(VueI18n)const messages = { // 将第三步创建的语言环境包注册到vuei18n中en: {...enLocale},cn: {...cnLocale},hk: {...hkLocale}
}const i18n = new VueI18n({locale: localstore.getItem('lang') || 'cn',messages
})export default i18n

4、注册到main.js

// 引入刚才所创建的/language/index.js
import i18n from '@/utils/language/index'
new Vue({router,store,i18n, // 注册实例对象render: h => h(App)
}).$mount('#app')

3、组件内使用

<p>{{ $t('loginModule.login') }}p>

4、切换语言类型

在组件内部可以在组件实例上获取到$i18n

// 切换成cn
this.$i18n.locale = 'cn'
localstore.setItem('lang', 'cn')
// 切换成en
this.$i18n.locale = 'en'
localstore.setItem('lang', 'en')
// 切换成hk
this.$i18n.locale = 'hk'
localstore.setItem('lang', 'hk')

备注：vuei18n使用详情请自行翻阅官网：https://kazupon.github.io/vue-i18n/zh/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！