Vue中vue-i18n结合element-ui实现国际化

Posted 2021-03-09 bien94

　　（一）配置语言资源文件

• 目录结构

• 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 enLocale from ‘./en_us‘
import zhLocale from ‘./zh_cn‘

Vue.use(VueI18n)

const localMessages = {
  en: {
  ...enLocale,
  ...elementEnLocale   // 将enLocale和elementEnLocale两个JSON格式的内容合并成一个JSON格式的内容 
  },
  zh: {
  ...zhLocale,
  ...elementZhLocale  // 将zhLocal和elementZhLocale两个JSON格式的内容合并成一个JSON格式的内容
  }
}
const i18n = new VueI18n({
  locale: ‘zh‘, // 提供默认语言
  messages: localMessages
})
  
export {i18n}

• en_us.js和zh_cn.js文件内容示例

// en_us.js
export default {
  app: {
      hello: ‘Hello World!‘,
  }
}


// zh_cn.js
export default {
  app: {
      hello: ‘你好，世界！‘,
  }
}

　　（二）初始化国际化

// main.js文件
import Vue from ‘vue‘
import ElementUI from ‘element-ui‘
import {i18n} from ‘./lang‘  // 路径要视代码目录结构，看lang文件夹和main.js文件的层次

Vue.use(i18n)

// 调用国际化初始函数
initLocalLang()


function initLocalLang () {
  // 国际化
  Vue.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value)
  })
}

　　（三）使用国际化

• 在Vue文件中的使用

　　（1）template标签中的使用

<template>
   <!-- 可以用this.$t，也可以直接使用$t-->
   <el-butto>{{$t(‘app.hello‘)}}</el-butto>
  <el-butto v-text="$t(‘app.hello‘)"></el-butto>
</template>

　　（2）script标签中的使用

<script>
   data() {
       return {
             helloTip: this.$t(‘app.hello‘)
       }
}
</script>

• 在JS文件中的使用

// JS文件

import {i18n} from ‘@/lang‘ 


let helloTip = i18n.messages[i18n.locale].app.hello