vue2 引入element-ui国际化

在 Vue 2 中配置国际化，您可以使用 Vue I18n 插件。Vue I18n 是 Vue.js 官方推荐的国际化插件，它可以帮助您轻松地实现多语言支持。

安装 vue-i18n

npm install vue-i18n@8.27.1 --save

使用

1.在 src/components 目录中新增一个名为 i18n 的目录,并添加以下3个文件：

src/components/i18n/locales/en/index.js 英语语言包：

export default {
  'Language': 'English'
}

src/components/i18n/locales/zh-CN/index.js 中文语言包：

export default {
  'Language': '中文'
}

src/components/i18n/index.js 语言包入口文件：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 各个国家的key
const localeKeys = ['en', 'zh-CN']

// 各个国家语言包
const messages = {}
for (const key of localeKeys) {
  messages[key] = require(`./locales/${key}/index.js`).default
}

export default new VueI18n({
  locale: 'en',
  messages,
  silentTranslationWarn: true // 忽略翻译警告
})

2. 打开 src/main.js 文件，挂载到Vue实例：

import i18n from './components/i18n'

new Vue({
  i18n
})

修改后的代码如下：

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import router from './router'
import store from './store'
import i18n from './components/i18n'


// Element挂载到Vue
Vue.$message = Element.Message
Vue.use(Element)

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App)
}).$mount('#app')

3. 在页面、js代码中使用：

一旦将 VueI18n 实例挂载到 Vue 实例上，在 Vue 组件中直接使用 $t 方法，可以通过指定键(key)来获取对应语言的翻译文本。这个键可以是简单的字符串，也可以是一个对象，用于支持更复杂的翻译需求。

以下是使用 $t 方法获取翻译文本的示例：

<template>
  <div>
    <p>{{ $t('Language') }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$t('Language'))
  }
}
</script>

Element-ui语言包

1. 创建 Element 语言包文件

在 src/components/i18n 目录下添加一个名为 element 的目录，并在目录中添加以下两个文件：

en.js

// 英语
exports.default = {
  el: {
    colorpicker: {
      confirm: 'OK',
      clear: 'Clear'
    },
    datepicker: {
      now: 'Now',
      today: 'Today',
      cancel: 'Cancel',
      clear: 'Clear',
      confirm: 'OK',
      selectDate: 'Select date',
      selectTime: 'Select time',
      startDate: 'Start Date',
      startTime: 'Start Time',
      endDate: 'End Date',
      endTime: 'End Time',
      prevYear: 'Previous Year',
      nextYear: 'Next Year',
      prevMonth: 'Previous Month',
      nextMonth: 'Next Month',
      year: '',
      month1: 'January',
      month2: 'February',
      month3: 'March',
      month4: 'April',
      month5: 'May',
      month6: 'June',
      month7: 'July',
      month8: 'August',
      month9: 'September',
      month10: 'October',
      month11: 'November',
      month12: 'December',
      week: 'week',
      weeks: {
        sun: 'Sun',
        mon: 'Mon',
        tue: 'Tue',
        wed: 'Wed',
        thu: 'Thu',
        fri: 'Fri',
        sat: 'Sat'
      },
      months: {
        jan: 'Jan',
        feb: 'Feb',
        mar: 'Mar',
        apr: 'Apr',
        may: 'May',
        jun: 'Jun',
        jul: 'Jul',
        aug: 'Aug',
        sep: 'Sep',
        oct: 'Oct',
        nov: 'Nov',
        dec: 'Dec'
      }
    },
    select: {
      loading: 'Loading',
      noMatch: 'No matching data',
      noData: 'No data',
      placeholder: 'Select'
    },
    cascader: {
      noMatch: 'No matching data',
      loading: 'Loading',
      placeholder: 'Select',
      noData: 'No data'
    },
    pagination: {
      goto: 'Go to',
      pagesize: '/page',
      total: 'Total {total}',
      pageClassifier: ''
    },
    messagebox: {
      title: 'Message',
      confirm: 'OK',
      cancel: 'Cancel',
      error: 'Illegal input'
    },
    upload: {
      deleteTip: 'press delete to remove',
      delete: 'Delete',
      preview: 'Preview',
      continue: 'Continue'
    },
    table: {
      emptyText: 'No Data',
      confirmFilter: 'Confirm',
      resetFilter: 'Reset',
      clearFilter: 'All',
      sumText: 'Sum'
    },
    tree: {
      emptyText: 'No Data'
    },
    transfer: {
      noMatch: 'No matching data',
      noData: 'No data',
      titles: ['List 1', 'List 2'], // to be translated
      filterPlaceholder: 'Enter keyword', // to be translated
      noCheckedFormat: '{total} items', // to be translated
      hasCheckedFormat: '{checked}/{total} checked' // to be translated
    },
    image: {
      error: 'FAILED'
    },
    pageHeader: {
      title: 'Back' // to be translated
    },
    popconfirm: {
      confirmButtonText: 'Yes',
      cancelButtonText: 'No'
    },
    empty: {
      description: 'No Data'
    }
  }
}

zh-CN.js

// 中文
exports.default = {
  el: {
    colorpicker: {
      confirm: '确定',
      clear: '清空'
    },
    datepicker: {
      now: '此刻',
      today: '今天',
      cancel: '取消',
      clear: '清空',
      confirm: '确定',
      selectDate: '选择日期',
      selectTime: '选择时间',
      startDate: '开始日期',
      startTime: '开始时间',
      endDate: '结束日期',
      endTime: '结束时间',
      prevYear: '前一年',
      nextYear: '后一年',
      prevMonth: '上个月',
      nextMonth: '下个月',
      year: '年',
      month1: '1 月',
      month2: '2 月',
      month3: '3 月',
      month4: '4 月',
      month5: '5 月',
      month6: '6 月',
      month7: '7 月',
      month8: '8 月',
      month9: '9 月',
      month10: '10 月',
      month11: '11 月',
      month12: '12 月',
      // week: '周次',
      weeks: {
        sun: '日',
        mon: '一',
        tue: '二',
        wed: '三',
        thu: '四',
        fri: '五',
        sat: '六'
      },
      months: {
        jan: '一月',
        feb: '二月',
        mar: '三月',
        apr: '四月',
        may: '五月',
        jun: '六月',
        jul: '七月',
        aug: '八月',
        sep: '九月',
        oct: '十月',
        nov: '十一月',
        dec: '十二月'
      }
    },
    select: {
      loading: '加载中',
      noMatch: '无匹配数据',
      noData: '无数据',
      placeholder: '请选择'
    },
    cascader: {
      noMatch: '无匹配数据',
      loading: '加载中',
      placeholder: '请选择',
      noData: '暂无数据'
    },
    pagination: {
      goto: '前往',
      pagesize: '条/页',
      total: '共 {total} 条',
      pageClassifier: '页'
    },
    messagebox: {
      title: '提示',
      confirm: '确定',
      cancel: '取消',
      error: '输入的数据不合法!'
    },
    upload: {
      deleteTip: '按 delete 键可删除',
      delete: '删除',
      preview: '查看图片',
      continue: '继续上传'
    },
    table: {
      emptyText: '暂无数据',
      confirmFilter: '筛选',
      resetFilter: '重置',
      clearFilter: '全部',
      sumText: '合计'
    },
    tree: {
      emptyText: '暂无数据'
    },
    transfer: {
      noMatch: '无匹配数据',
      noData: '无数据',
      titles: ['列表 1', '列表 2'],
      filterPlaceholder: '请输入搜索内容',
      noCheckedFormat: '共 {total} 项',
      hasCheckedFormat: '已选 {checked}/{total} 项'
    },
    image: {
      error: '加载失败'
    },
    pageHeader: {
      title: '返回'
    },
    popconfirm: {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    },
    empty: {
      description: '暂无数据'
    }
  }
}

以上两个文件来源于 Element官方。在当前项目中，将Element语言包放到本地的目的是为了便于后期对语言包进行修改拓展。

如果不想在本地创建这两个文件，也可以通过引入的方式直接获取到对应的文件，例如：import elementLang from 'element-ui/src/locale/lang/en'。

2. 在语言包入口文件引入 Element 语言包

在 src/components/i18n/index.js 文件中找到以下代码块：

// 各个国家语言包
const messages = {}
for (const key of localeKeys) {
  messages[key] = require(`./locales/${key}/index.js`).default
}

修改为：

// 各个国家语言包
const messages = {}
for (const key of localeKeys) {
  const langObj = require(`./locales/${key}/index.js`).default
  const langElement = require(`./element/${key}`)
  messages[key] = {
    ...langObj,
    ...langElement ? langElement.default : {}
  }
}

修改后的代码为：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 各个国家的key
const localeKeys = ['en', 'zh-CN']

// 各个国家语言包
const messages = {}
for (const key of localeKeys) {
  const langObj = require(`./locales/${key}/index.js`).default
  const langElement = require(`./element/${key}`)
  messages[key] = {
    ...langObj,
    ...langElement ? langElement.default : {}
  }
}

export default new VueI18n({
  locale: 'en',
  messages,
  silentTranslationWarn: true // 忽略翻译警告
})

通过这种方式，Element语言包与我们自定义的语言包便合并在一起了。

3. 挂载 Element 到 Vue 实例中时将语言包注入

在 src/main.js 中找到以下代码块

Vue.use(Element)

修改为：

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

修改后的代码为：

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import router from './router'
import store from './store'
import i18n from './components/i18n'

// Element挂载到Vue
Vue.$message = Element.Message
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App)
}).$mount('#app')

完成后 Element 相关组件就能正常的显示翻译后的内容了。

切换组件的封装

在我们的UI组件中，我们使用了 Element 中的下拉菜单组件。如果想了解更多关于下拉菜单组件的用法，请访问 Dropdown下拉菜单文档地址 查看详细文档内容。

新建组件文件

在src/components/i18n目录中，新建一个名为change-language.vue 的文件，并添加以下内容：

<template>
  <el-dropdown @command="handle">
    <span class="el-dropdown-link">
      {{$t('Language')}}<i class="el-icon-caret-bottom el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item, index) of list" :key="index" :command="item.key">{{item.name}}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'change-language',
  data() {
    return {
      list: [
        { key: 'en', name: 'English' }, // 英语
        { key: 'zh-CN', name: '中文' } // 中文
      ]
    }
  },
  methods: {
    handle(value) {
    }
  }
}
</script>
<style scoped lang="less">
</style>

然后，我们可以找一个Vue文件，在其中使用这个组件进行观察。使用方式如下（以Vue单文件组件为例）：

• 引入组件

import ChangeLanguage from '@/components/i18n/change-language'

• 注册组件

components: {
  ChangeLanguage
}

• 使用

<ChangeLanguage />

这样一个基本的语言包下拉单组件样式就完成了，之后还需要对组件进行功能上的开发。

切换语言

在组件handle函数代码中添加代码，如下：

handle(value) {
  this.$i18n.locale = value
}

通过将value赋给this.$i18n.locale，我们可以动态地切换当前语言为下拉菜单中所选中的语言。

现在虽然基本的切换功能已经完成，但是当我们在网页中切换语言包并刷新页面后，之前选择的语言包不会被保留，而是重新加载页面时返回到默认的语言包。这是因为在刷新页面时，浏览器会重新加载整个应用程序，并重置Vue实例的状态，包括设置的语言包。这时候我们就需要做切换数据的持久化处理，来保证我们切换后的内容显示不会出错。

数据持久化

数据持久化的方式有很多种，这里我们采用了浏览器的本地存储 LocalStorage 来实现。

在组件handle函数代码中添加代码，如下：

handle(value) {
  this.$i18n.locale = value
  localStorage.setItem('change-language', value)
}

找到 src/components/i18n/index.js 文件中以下代码块：

export default new VueI18n({
  locale: 'en',
  messages,
  silentTranslationWarn: true // 忽略翻译警告
})

将其中 locale 写死的值 'en' 改为 localStorage 获取的值，如下：

export default new VueI18n({
  locale: localStorage.getItem('change-language') || 'zh-CN',
  messages,
  silentTranslationWarn: true // 忽略翻译警告
})

上述代码中，语言包的key值会先从本地存储中获取，如果获取不到则设置为默认值'zh-CN'。

这样，我们切换语言包再刷新页面后，仍然可以正确地显示之前选择的语言包。