Vue element-ui 国际化 快速上手实践
1. 安装vue-i18n
npm install vue-i18n -S
或
cnpm install vue-i18n -S
2. 在项目目录中创建lang文件夹，并创建三个js文件，为别为：zh.js、en.js、index.js
2.1 zh.js
const zh = {
route: {
Dashboard: '首页',
Documentation: '文档',
Guide: '引导页',
Permission: '权限',
'Icons': '图标',
'Components': '组件',
'Component Mixin': '小组件',
'Back To Top': '返回顶部',
……
},
header: {
fullScreen: '全屏',
cancelFullScreen: '取消全屏',
message: '消息',
setting: '个人设置',
logout: '退出登录'
},
login: {
password: '密码',
username: '用户名'
}
}
export default zh
2.2 en.js
const en = {
route: {
Dashboard: 'Dashboard',
Documentation: 'Documentation',
Guide: 'Guide',
Permission: 'Permission',
'Page Permission': 'Page Permission',
'Directive Permission': 'Directive Permission',
'Role Permission': 'Role Permission',
'Icons': 'Icons',
'Components': 'Components',
'Tinymce': 'Tinymce',
'Markdown': 'Markdown',
'JSON Editor': 'JSON Editor',
'SplitPane': 'SplitPane',
'Upload': 'Upload',
'Dropzone': 'Dropzone',
'Sticky': 'Sticky',
'Count To': 'Count To',
'Component Mixin': 'Component Mixin',
'Back To Top': 'Back To Top',
……
},
header: {
fullScreen: 'fullScreen',
'cancelFullScreen': 'cancel fullScreen',
message: 'message',
home: 'home',
setting: 'setting',
logout: 'logout',
labelOptions: 'label options',
closeOthers: 'close others'
},
login: {
system: 'Management System',
password: 'Password',
username: 'Username'
}
}
export default en
2.3 index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import store from '@/store'//自定义的store
import elEn from 'element-ui/lib/locale/lang/en' //Element-UI国际化所需
import elZh from 'element-ui/lib/locale/lang/zh-CN' //Element-UI国际化所需
import zh from './zh'//自定义的中文
import en from './en'//自定义的英文
Vue.use(VueI18n)
const messages = {
zh: {
...zh,
...elZh
},
en: {
...en,
...elEn
}
}
const i18n = new VueI18n({
locale: store.getters.lang,//从store中读取存储的语言，zh或en
messages
})
export default i18n
3. 在main.js中引用i18n
import Element from 'element-ui'
import i18n from './lang/index'
Vue.use(Element, {
i18n:(key, value) => i18n.t(key, value)
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
4. 使用
4.1 双括号{{$t(‘a.bb’)}}
<a >{{ $t('route.'+item.meta.title) }}</a>
4.2 绑定到属性 :prop=”$t(‘a.bb’)”
<item :title="$t('route.'+item.meta.title)" />
其中'route.'的前缀对应与zh.js或en.js中的route节点，如果是别的节点，比如setting节点下的，在使用的时候就应该为$t('settiing.'+item.data)
5. 切换
handleSetLanguage(command) {
console.log(command)
this.$i18n.locale = command
this.$store.dispatch('app/setLang', command)
}
6. 效果展示
中文：
英文：
