您当前的位置首页/Vue.js/ 正文

vue-i18n国际化-多语言切换

admin 最后更新时间 2018-07-05 11:40:22   186浏览
vue国际化解决方案插件 [github: vue-i18n](https://github.com/kazupon/vue-i18n) 使用起来蛮简单的一个东西,它可以让你的VUE应用实现多语言版本。 为啥叫i18n,这个很有意思的单词,其实是个缩略词,原词internationalization,首字母和末尾字母之间有18个字母,所以直接缩略为i18n。。。 下面直接上用法,vue 2.x配合element-ui使用 ``` npm install vue-i18n -S ``` 建个目录i18n放语言包 ``` i18n |-index.js |-zh-CN.js |-en.js ``` ``` index.js: import Vue from 'vue' import VueI18n from 'vue-i18n' import zhLocale from 'element-ui/lib/locale/lang/zh-CN' import enLocale from 'element-ui/lib/locale/lang/en' import zhCN from './zh-CN' import en from './en' Vue.use(VueI18n) const messages = { zhCN: { ...zhCN, ...zhLocale }, en: { ...en, ...enLocale } } const i18n = new VueI18n({ locale: 'en', messages }) export default i18n ``` 这里要注意实例化VueI18n时传入的messages字段是固定的,别改成其他的 zh-CN.js ``` export default { home: '家', other: '卡卡' } ``` 语言包就按上面的导出就行了,每种语言一个包是最好的,方便管理 main.js ``` import i18n from './i18n' Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) }) new Vue({ el: '#app', store, router, i18n, components: { App }, template: '<App/>' }) ``` 这里要注意一点是我用的是最新版本的vue-i18n,已经到8.0.0了,但是Element-ui不能直接支持新版,所以需要在这里手动处理一下 好了,已经安装配置好了国际化了,很简单不是么。 最后在组件里面使用 ``` {{ $t('home') }} ``` 这样就能显示语言了,怎么切换语言呢? 在methods里面添加方法,直接通过this.$i18n.locale设置语言类别就行了 ``` setLangCommand (command) { this.$i18n.locale = command } ``` 我用的是dropdown组件来切换 ``` <el-dropdown @command="setLangCommand"> <span class="el-dropdown-link"> <i class="el-icon-vicon-user"></i> 系统语言<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="zhCN"><i class="el-icon-vicon-logout"></i> 简体中文</el-dropdown-item> <el-dropdown-item command="en"><i class="el-icon-vicon-logout"></i> 英语</el-dropdown-item> </el-dropdown-menu> </el-dropdown> ``` 到此,国际化已经弄好了。