Vue element-ui 国际化 快速上手实践

1.   安装vue-i18n

npm install vue-i18n -S

或

cnpm install vue-i18n -S

2.   在项目目录中创建lang文件夹，并创建三个js文件，为别为：zh.js、en.js、index.js

2.1  zh.js

const zh = {

  route: {

    Dashboard: ‘首页‘,

    Documentation: ‘文档‘,

    Guide: ‘引导页‘,

    Permission: ‘权限‘,

    ‘Icons‘: ‘图标‘,

    ‘Components‘: ‘组件‘,

    ‘Component Mixin‘: ‘小组件‘,

    ‘Back To Top‘: ‘返回顶部‘,

    ……

  },

  header: {

    fullScreen: ‘全屏‘,

    cancelFullScreen: ‘取消全屏‘,

    message: ‘消息‘,

    setting: ‘个人设置‘,

    logout: ‘退出登录‘

    },

  login: {   

    password: ‘密码‘,

    username: ‘用户名‘

  }

}

export default zh

2.2 en.js

const en = {

  route: {

    Dashboard: ‘Dashboard‘,

    Documentation: ‘Documentation‘,

    Guide: ‘Guide‘,

    Permission: ‘Permission‘,

    ‘Page Permission‘: ‘Page Permission‘,

    ‘Directive Permission‘: ‘Directive Permission‘,

    ‘Role Permission‘: ‘Role Permission‘,

    ‘Icons‘: ‘Icons‘,

    ‘Components‘: ‘Components‘,

    ‘Tinymce‘: ‘Tinymce‘,

    ‘Markdown‘: ‘Markdown‘,

    ‘JSON Editor‘: ‘JSON Editor‘,

    ‘SplitPane‘: ‘SplitPane‘,

    ‘Upload‘: ‘Upload‘,

    ‘Dropzone‘: ‘Dropzone‘,

    ‘Sticky‘: ‘Sticky‘,

    ‘Count To‘: ‘Count To‘,

    ‘Component Mixin‘: ‘Component Mixin‘,

    ‘Back To Top‘: ‘Back To Top‘,

    ……

  },

  header: {

    fullScreen: ‘fullScreen‘,

    ‘cancelFullScreen‘: ‘cancel fullScreen‘,

    message: ‘message‘,

    home: ‘home‘,

    setting: ‘setting‘,

    logout: ‘logout‘,

    labelOptions: ‘label options‘,

    closeOthers: ‘close others‘

  },

  login: {

    system: ‘Management System‘,

    password: ‘Password‘,

    username: ‘Username‘

  }

}

export default en

2.3 index.js

import Vue from ‘vue‘

import VueI18n from ‘vue-i18n‘

import store from ‘@/store‘//自定义的store

import elEn from ‘element-ui/lib/locale/lang/en‘ //Element-UI国际化所需

import elZh from ‘element-ui/lib/locale/lang/zh-CN‘ //Element-UI国际化所需

import zh from ‘./zh‘//自定义的中文

import en from ‘./en‘//自定义的英文

Vue.use(VueI18n)

const messages = {

  zh: {

    ...zh,

    ...elZh

  },

  en: {

    ...en,

    ...elEn

  }

}

const i18n = new VueI18n({

  locale: store.getters.lang,//从store中读取存储的语言，zh或en

  messages

})

export default i18n

3.   在main.js中引用i18n

import Element from ‘element-ui‘

import i18n from ‘./lang/index‘

Vue.use(Element, {

  i18n:(key, value) => i18n.t(key, value)

}) //为了兼容vue-i18n@6.x

new Vue({

  el: ‘#app‘,

  router,

  store,

  i18n,

  render: h => h(App)

})

4.   使用

4.1  双括号{{$t(‘a.bb’)}}

  <a >{{ $t(‘route.‘+item.meta.title) }}</a>

4.2  绑定到属性 :prop=”$t(‘a.bb’)”

<item :title="$t(‘route.‘+item.meta.title)" />

其中‘route.‘的前缀对应与zh.js或en.js中的route节点，如果是别的节点，比如setting节点下的，在使用的时候就应该为$t(‘settiing.‘+item.data)

5.   切换

  handleSetLanguage(command) {

      console.log(command)

      this.$i18n.locale = command

      this.$store.dispatch(‘app/setLang‘, command)

}

6.   效果展示

中文：

英文：

Vue element-ui 国际化 快速上手实践

原文：https://www.cnblogs.com/Olive116/p/13727486.html