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

更新日期: 2019-09-17阅读: 2.2k标签: 国际化

首先安装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)"
      :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有很多个语法,大家自行查阅文档,谢谢!


链接: https://fly63.com/article/detial/5985

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!