vue中element国际化语言切换

一. 安装依赖

npm install vue-i18n

二. 创建文件

在src目录下先创建一个lang 文件夹,再创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件, en.js和zh.js必须保持一致

en.js:

export default {
  m: {
    music: 'MUSIC',
    friend: 'FRIEND'
  },
  placeholder:{
  	data: 'select date'
  }

zh.js:

export default {
  m: {
    music: '音乐',
    friend: '朋友'
  },
  placeholder:{
  	data: '选择日期'
  }

index.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale' // 引入elementui语言包模块
import enLocale from './en.js' // 本地英文包
import zhLocale from './zh.js' // 本地中文包

Vue.use(VueI18n) // vue使用i18n模块

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
// 使用选项创建VueI18n实例
const i18n = new VueI18n({
  locale: 'en', // 设置默认语言
  messages // 设置语言环境信息
})

locale.i18n((key, value) => i18n.t(key, value)) // 在注册Element时设置i18n的处理方法

export default i18n

三. 将i18n引入main.js, 并在初始化注册

import i18n from './lang/index'
// element-ui 为了兼容vue-i18n@6.x
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.use(ElementUI)
Vue.config.productionTip = false

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

四. 在页面中使用

(1) 双括号 {{ $t('xxx.yyy') }}

<el-button type="primary">{{ $t('m.music') }}</el-button>

(2) 绑定到属性上 :prop="$t('xxx.yyy')"

<el-input v-model="value" :placeholder="$t('placeholder.date')" />

(3) 在js语句中使用 this.$t('m.music')

   console.log(this.$t('m.music'))

参考链接：https://blog.csdn.net/qq_39009348/article/details/82224166
参考链接：https://element.eleme.cn/#/zh-CN/component/i18n