elementUi+Vue+i18n+Vue-cli 实现前端国际化

• 首先安装vue-i18n

算了，这个不多讲，看官网：http://kazupon.github.io/vue-i18n/zh/

• main.js 中引入并注册

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.js
export default {
  app: {
    LanguageChage: '语言切换',
    editPassword: '修改密码',
    signOut: '登出'
  }
};

//en.js
export 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.js
export 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有很多个语法，大家自行查阅文档，谢谢！