1.安装
npm install vue-i18n
2.配置
main.js文件的
1.引入
importVue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
2.注册实例,引入文件
const i18n = new VueI18n({
local:'zh',
messages:{
'zh':'zhIndexFiledsPath.js',
'en':'enIndexFiledsPath.js'
}
})
new Vue({
el:'#app',
i18n,
componants:{App},
template:<App/>
})
3.使用
html
<template>
<div>{{$t{'messages.name'}}}</div>
</template>
js
let a = this.$t{'messages.name'}
4.切换
<el-button @click="lang('en')">en</el-button>
<el-button @click="lang('zh')">zh</el-button>
lang(type){
this.$i18n.local = type
}
5.刷新依旧保存原来状态
const i18n = new VueI18n({
local:localstorage.getItem('lang')||'zh',
messages:{
'zh':'zhIndexFiledsPath.js',
'en':'enIndexFiledsPath.js'
}
})
lang(type){
this.$i18n.local = type
loaclstorage.setItem('lang',type)
}