前端国际化之Vue-i18n实践

[ttop5]

主要难点在于自定义部分和 element-ui 组件国际化的结合使用

安装 vue-i18n

$ yarn add vue-i18n --save-dev

主要内容

common/storage.js

export function setLocalStorage(key, value) {
  if (!key) { return }
  window.localStorage.setItem(key, value)
}
 
export function getLocalStorage(key) {
  if (!key) { return }
  return window.localStorage.getItem(key)
}

common/lang/index.js

import enLan from './en'
import zhLan from './zh_CN'
 
 
export default {
  en: enLan,
  zh: zhLan,
}

common/lang/en.js

import enLocale from 'element-ui/lib/locale/lang/en'
 
 
export default {
  ...enLocale,
  // leftbar
  leftbar: {
    websocket: 'Websocket',
    api: 'HTTP API',
    users: 'Users',
  },
}

common/lang/zh_CN.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
 
 
export default {
  ...zhLocale,
  // leftbar
  leftbar: {
    websocket: 'Websocket',
    api: 'HTTP接口',
    users: '用户管理',
  },
}

项目配置

main.js

import VueI18n from 'vue-i18n'
import ElementLocale from 'element-ui/lib/locale'

import lang from './common/lang'
import { getLocalStorage } from './common/storage'


Vue.use(VueI18n)  // 通过插件的形式挂载

const i18n = new VueI18n({
  locale: getLocalStorage('language') || 'en',  // 默认语言标识
  messages: lang,
})
 
ElementLocale.i18n((key, value) => i18n.t(key, value))


new Vue({
  el: '#app',
  i18n,
  render: h => h(App),
})

切换按钮

components/NavBar.vue

<template>
  <div class="select-language">
    <a @click="switchLanguage('language', 'zh')" href="javascript:;">中文</a>
    <span> / </span>
    <a @click="switchLanguage('language', 'en')" href="javascript:;">EN</a>
  </div>
</template>


<script>
import { setLocalStorage, getLocalStorage } from '../common/storage'
 
export default {
  name: 'nav-bar',
  methods: {
    switchLanguage(key, value) {
      if (getLocalStorage(key) !== value) {
        setLocalStorage(key, value)
        location.reload();
      }
    },
  },
}
</script>

页面展示

components/LeftBar.vue

<template>
  <div class="left-bar">
    <div class="page-title">{{ $t('leftbar.websocket') }}</div>
    <div class="page-title">{{ $t('leftbar.api') }}</div>
    <div class="page-title">{{ $t('leftbar.users') }}</div>
  </div>
</template>