vue 多语言国际化支持

这次我们主要来学习vue的多语言化支持

1. 国际化的处理方案(i18n)

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。

vue项目中的多语言支持使用的是vue-i18n

1.1在项目中安装好依赖包

npm i vue-i18n@8.22.2

1.2创建src/lang/index.js

固定写法,可在vue项目中直接使用

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文
  locale: 'zh',
  // 将elementUI语言包加入到插件语言数据里
  messages: {
    // 英文环境下的语言数据
    en: {
      ...elementEN
    },
    // 中文环境下的语言数据
    zh: {
      ...elementZH
    }
  }
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

1.3在main.js中挂载 i18n的插件

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

1.4修改模板渲染

<div class="app-breadcrumb">
      {{ $t('navbar.companyName') }}
      <span class="breadBtn">测试版</span>
 </div>

1.5手动在lang/index.js中修改图下所示的内容,例如:我下载了饿了么的日文包,下面的locale就为ja,

中文则为zh,英文则为en.  

**需注意:ElementUI 的组件只会对组件自身的很少一部分进行多语言化支持

 例如:

 1.6封装多语言组件

在放置公共组件的位置： src/components/Lang/index.vue

需注意：icon-class="language" 需要在src\icons\svg\下有一个名为language.svg的文件

<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>

1.7全局注册

在 component/index.js ( 这个文件是我把需要全局注册的组件 集中注册,再在main.js 中进行全局注册 ) 中进行全局组件注册

 1.8在需要的组件中引入即可.