0、安装
版本安装5.0.3，否则出现Vue.locale不存在的错误
npm install vue-i18n@5.0.3
1、引入
import VueI18n from 'vue-i18n'
Vue.use(VueI18n )
2、语言资源包
// locale/languages/zh-CN.js 自定义的语言包
module.exports = {
customName: {
inbox: '收件箱',
sentMail: '已发送邮件',
mailBox: '邮箱',
...
}
}
// locale/index.js
//按项目自己定义的语言包
//写法一：
import en from './languages/en-US'
import zh from './languages/zh-CN'
const messages = {
"zh-CN": zh,
"en-US": en
}
//写法二：
const messages = {
'zh': require('./languages/zh-CN'),
'en': require('./languages/en-US')
}
3、VueI18n实例
//初始化插件变量
const i18n = new VueI18n({
locale: 'zh-CN', //当前语言环境
messages //语言环境对应语言文件的map集合
})
// 如果本地做了语言包缓存
const i18n = new VueI18n({
locale: (function(){
if(localStorage.getItem('lang)) {
return localStorage.getItem('lang)
}
return 'zh'
}())
})
4、挂载
new Vue({
el： ’#app',
i18n,
router,
components: {App},
template: '<App/>'
.....
})
5、使用
// 标签中使用
<div>{{$t('customName.email')}}</div>
// 属性使用
<input :placeholder="$t('customName.email')">
// js使用
this.$t('customName.email')
//可以把i18n实例赋给window
window.i18n = i18n
this.$i18n .t('customName.email')
i18n.t('customName.email')
6、语言切换
vue-i18n提供了一个全局配置参数叫locale,用于实现不同语言的切换
//值可能为zh | zh-CN
if( this.$i18n.locale === 'zh') {
this.$i18n.locale = 'en'
//若有缓存
localStorage.setItem('lang', 'en')
}else{
this.$i18n.locale = 'zh'
//若有缓存
localStorage.setItem('lang', 'zh')
}
ps:
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
//可以导入iview自带的语言包 [可选]
import iview_zh from 'iview/dist/locale/zh-CN';
import iview_en from 'iview/dist/locale/en-US';
//项目自定义语言包
import zh from '@assets/lang/zh-CN'
import en from '@assets/lang/en-US'
Vue.locale('zh-cn', zh)
Vue.locale('en', en)
//如果合并
Vue.locale('zh-cn', Object.assign(zh,iview_zh ))
//如果使用了lodash
Vue.locale('en', _.merge(en,iview_en ))
//获取当前语言
const DEFAULT_LANG = 'zh-CN'
const LOCALE_KEY = 'localLang'
const navLang = navigator.language;
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
const lang = window.localStorage.getItem(LOCALE_KEY) || localLang || DEFAULT_LANG
//设置默认中文
Vue.config.lang =lang
赞赞哇.png
