elementUi+Vue+i18n+Vue-cli 實現前端國際化

時間 2019-11-05

標籤 elementui+vue+i18n+vue elementui 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' }
    }]
  }