算了，这个不多讲，看官网：http://kazupon.github.io/vue-i18n/zh/
import i18n from './lang';// 设置国际化Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value)});new Vue({ el: '#app', i18n, render: h => h(App)});
- src目录中建立语言包文件夹 lang/index.js
//index.js文件import Vue from 'vue';import VueI18n from 'vue-i18n';import enLocale from 'element-ui/lib/locale/lang/en';import zhLocale from 'element-ui/lib/locale/lang/zh-CN';Vue.use(VueI18n);const messages = { en: { message: { hello: '{msg} world' }, ...enLocale }, zh: { message: { hello: '{msg} 世界' }, ...zhLocale }};const i18n = new VueI18n({ locale: 'zh', // set locale messages // set locale messages});export default i18n;
- 效果初探，随便找个页面试试，此时页面会显示 hello 世界
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p><p v-html="$t('message.hello')" />
Look,是不是很简单，已经有了雏形，开始精加工
- 一般来讲，要翻译的文字比较多，所以最好为每门语言建立独立文件管理. 新建文件 lang/zh.js、 lang/en.js, 写入一些测试数据
//zh.jsexport default { app: { LanguageChage: '语言切换', editPassword: '修改密码', signOut: '登出' }};
//en.jsexport default { app: { LanguageChage: 'Language switching', editPassword: 'Change Password', signOut: 'Sign out' }};
- 下面去封装一个组件，用来切换语言，并将语言状态保存到cookie和Vuex中。
在封装组件之前，咱们先去封装一个方法，保存语言状态值， 更新之前的 lang/index.js 文件，主要是 getLanguage 方法
import Vue from 'vue';import VueI18n from 'vue-i18n';import Cookies from 'js-cookie';import enLocaleElement from 'element-ui/lib/locale/lang/en';import zhLocaleElement from 'element-ui/lib/locale/lang/zh-CN';import zhLocale from './zh';import enLocale from './en';Vue.use(VueI18n);// 语言环境信息const messages = { en: { ...enLocale, ...enLocaleElement }, zh: { ...zhLocale, ...zhLocaleElement }};// 获取语言环境并保留状态export function getLanguage() { const cookieLanguage = Cookies.get('language'); if (cookieLanguage) return cookieLanguage; const browerLanguage = (navigator.language || navigator.browserLanguage).toLowerCase(); const locales = Object.keys(messages); for (const locale of locales) { if (browerLanguage.indexOf(locale) > -1) { return locale; } }}const i18n = new VueI18n({ locale: getLanguage(), messages, fallbackLocale: 'zh'});// 热更新if (module.hot) { module.hot.accept(['./en', './zh'], function() { i18n.setLocaleMessage('en', require('./en').default); i18n.setLocaleMessage('zh', require('./zh').default); });}export default i18n;
vuex仓库中增加language字段， 一般大家应该都是用vuex的吧，这里我用vuex的module模式来写， 其实随意，都可以。
// app.js 这是我的store文件import { getLanguage } from '@/lang/'; // 引入之前写好的方法// state里增加language字段const state = { language: getLanguage()};const mutations = { SETLANGE: (state, language) => { state.language = language; Cookies.set('language', language); }};const actions = { setLanguage({ commit }, language) { commit('SETLANGE', language); }};export default { namespaced: true, state, mutations, actions};
- OK, 准备工作已完成，下面封装切换语言的组件， 新建一个 launageSelect.vue 文件
<template> <el-dropdown trigger="click" class="international" @command="handleSetLanguage"> <div> 语言切换 </div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :disabled="language==='zh'" command="zh"> 中文 </el-dropdown-item> <el-dropdown-item :disabled="language==='en'" command="en"> English </el-dropdown-item> </el-dropdown-menu> </el-dropdown></template><script>export default { computed: { language() { return this.$store.getters.language; //这里我用getters处理，代码不贴了，你么你随意 } }, methods: { handleSetLanguage(lang) { // 通过VueI18n的根实例设置当前的语言环境 不懂请看文档 http://kazupon.github.io/vue-i18n/zh/api/#%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7 this.$i18n.locale = lang; this.$store.dispatch('app/setLanguage', lang); this.$message({ message: 'Switch Language Success', type: 'success' }); } }};</script>
- 到此为止，基本的国际化框架就已经完成，可以直接去使用了。
一般vue项目的菜单都是在route中去写的，此时无法直接使用模板语法进行国际化，所有咱们还要封装一个方法，用来处理菜单标题
/** *生成字符- 国际化使用 * @param {*} lanuageKey 语言对象键值 * @param {*} title 要转换的值 */export function generateText(lanuageKey, title) { const key = this.$te(`${lanuageKey}.${title}`); if (key) { return this.$t(`${lanuageKey}.${title}`); } return title;}
找到渲染菜单的文件，引入刚刚的方法，进行菜单标题格式化
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}" > <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateText('route', onlyOneChild.meta.title)" /> </el-menu-item> </app-link> //引入方法 import { generateText } from '@/utils/'; //methods里调用下 methods: { generateText }
此时你的配置应该是这样的
// zh.jsexport default { route: { home: '首页', }}//router.js (title中的home要和你的zh.js里的key值对应) { path: '/', component: Layout, redirect: '/home', children: [{ path: 'home', name: 'Home', component: () => import('@/views/home/index'), meta: { title: 'home', icon: 'home' } }] }
此时你得菜单项便可以正常渲染了
- 到此便正式结束，其实还蛮简单的，当然i18n有很多个语法，大家自行查阅文档，谢谢！