乐趣区

elementUiVuei18nVuecli-实现前端国际化

jiezi
  • 首先安装 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 有很多个语法，大家自行查阅文档，谢谢！
退出移动版