<div>目前仅支持简体中文（zh-CN）和英文（en）</div>

使用方式

// 简体中文
vm.$paiui.i18n.locale = 'zh-CN'
// 英文
vm.$paiui.i18n.locale = 'en'

组件示例

<el-button :type="$paiui.i18n.locale === 'zh-CN' ? 'primary' : 'plain'" v-on:click="$paiui.i18n.locale = 'zh-CN'"> zh-CN</el-button>
<el-button :type="$paiui.i18n.locale === 'en' ? 'primary' : 'plain'" v-on:click="$paiui.i18n.locale = 'en'"> en</el-button>

<div style="margin-bottom: 1em;">
  <el-button :type="$paiui.i18n.locale === 'zh-CN' ? 'primary' : 'plain'" v-on:click="$paiui.i18n.locale = 'zh-CN'"> zh-CN</el-button>
  <el-button :type="$paiui.i18n.locale === 'en' ? 'primary' : 'plain'" v-on:click="$paiui.i18n.locale = 'en'"> en</el-button>
</div>
<p-uploader mode="avatar" :use-btn="true" fit="cover" :updating="true" style="width: 170px; height: 220px;" ref="avatarUseBtn"> </p-uploader>
<br />
<p-uploader mode="multiple" accept="png,docx" :size="1" :updating="true" ref="multipleAccept"> </p-uploader>

vue-i18n - 基础

初始化

import App from '@/App.vue'
//
import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 注册
Vue.use(VueI18n)
// 初始化、资源配置
const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    en: {
      uploader: {
        uploadAvatar: 'Upload avatar',
        selectFile: 'Select file',
        parsePlaceholder: 'No image',
        onExceed: 'Upload {0} file at most',
        onBeforeUploadSize: 'Upload file size cannot exceed {0}({1})',
        onBeforeUploadType: 'Only {0} format can be uploaded({1})',
        tipsType: 'Only {0} format can be uploaded',
        tipsSize: 'Upload file size cannot exceed {0}',
      },
      treeSelect: { filterPlaceholder: 'Enter keyword', emptyText: 'No data available' },
      image: { error: 'Request fail' },
    },
    'zh-CN': {
      uploader: {
        uploadAvatar: '上传头像',
        selectFile: '选取文件',
        parsePlaceholder: '暂无图片',
        onExceed: '上传文件最多{0}个',
        onBeforeUploadSize: '上传文件大小不能超过{0}({1})',
        onBeforeUploadType: '只能上传{0}格式文件({1})',
        tipsType: '只能上传{0}格式文件',
        tipsSize: '文件大小不超过{0}',
      },
      treeSelect: { filterPlaceholder: '输入关键字', emptyText: '暂无数据' },
      image: { error: '请求失败' },
    },
  },
})
// 注入实例
new Vue({
  i18n,
  router,
  el: '#app',
  render: (h) => h(App),
})

在Vue实例中使用

<div>
  {{ $t('image.error') }}
</div>

let value = this.$t('image.error')

在javascript中使用

const i18n = new VueI18n({
  //...
})
let value = i18n.t('image.error')

Element国际化 - 基础

完整引入

// 完整引入 Element
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })

按需引入

// 按需引入 Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// 设置语言
locale.use(lang)
// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

Element兼容vue-i18n @6.x以上版本

完整引入

import Vue from 'vue'
import Element from 'element-ui'
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',
    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  },
  'zh-CN': {
    message: '你好',
    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})
new Vue({ i18n }).$mount('#app')

按需引入

import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'
Vue.use(VueI18n)
Vue.use(DatePicker)
const messages = {
  en: {
    message: 'hello',
    ...enLocale
  },
  'zh-CN': {
    message: '你好',
    ...zhLocale
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})
ElementLocale.i18n((key, value) => i18n.t(key, value))

参考

Element - 国际化

vue-i18n