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

Posted 2022-10-21 墨遥

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',   

    'Icons': 'Icons',

    'Components': 'Components',

    'Back To Top': 'Back To Top',

    ……

  ,

  header:

    fullScreen: 'fullScreen',

    'cancelFullScreen': 'cancel fullScreen',

    message: 'message',

    home: 'home',

    setting: 'setting',

    logout: 'logout'  

  ,

  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.   效果展示

中文：

英文：