前言

在项目中需要使用多语言切换，尤其涉及国外项目时，在vue中所匹配的国际化插件工具就是vue-i18n；

目标效果

点击中英文切换按钮可以实现多语言切换功能

如何实现多语言国际化

1.安装国际化的包

npm i vue-i18n@8.22.2 或 yarn add vue-i18n@8.22.2

注意： vue-i18n现在有了一个新版本，对应的api有些不兼容，请还是使用8.22.2这个版本!

2.多语言配置

2.1 结合项目创建所有文案，文件目录解构如下,

|-- main.js 导入文件
|-- lang
  |-- index.js 创建实例对象
  |-- locale 各种语言包
    |-- en.js  英文包
    |-- zh.js  中文包

2.2 创建i18n实例对象

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

// 引入自定义中文包
import customZH from './locale/zh'

// 引入自定义英文包
 import customEN from './locale/en'


Vue.use(VueI18n)

// 准备翻译的语言环境信息
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }，
    ...customEN // 将自定义英文包加入
  },
  zh: {
    message: {
      hello: '您好世界！'
    },
    ...customZH // 将自定义英文包加入
  },  
}

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'zh', // 设置地区
  messages // 设置地区信息
})

export default i18n

2.3 根据目录结构新建各语言包的js文件

//中文语言包zh.js

export default {
  route: {
    dashboard: '首页',
    manage: '后台管理',
    users: '用户管理',
    menus: '菜单管理',
    logs: '日志管理',
    }
    }

//英文语言包en.js

export default {
  route: {
    dashboard: 'Dashboard',
    manage: 'manage',
    users: 'users',
    menus: 'menus',
    logs: 'logs',
   
}
}

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

import i18n from '@/lang'
// 加入到根实例配置项中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

2.5 vue页面使用（部分页面多语言化）

语法：$t('属性名')

  <p>{{ $t('message.hello') }}</p>

输出 ：<p>您好世界！</p>

2.6 实现动态切换中英文-封装组件

2.6.1 封装多语言组件

注意点：

1、创建语言切换功能组件，使用了ElementUl，需要在配置语言环境信息时引入其语言包，不然组件无法翻译成功；

2、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 ">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

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

2.6.2 全局注册

在component/index.js中进行全局组件注册

import Lang from './Lang'
   export default {
  // 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
   install(Vue) {
    // 进行组件的全局注册
    Vue.component('Lang', Lang)
  }
}

2.6.3 在功能组件中引入语言切换组件

    <!-- 语言包 -->
    <lang class="right-menu-item" />

总结

中英文切换原理，实际就是当我们引入VueI18n语言插件之后，每个组件实例都拥有了一个$t方法，这个方法可以帮助我们进行语言转换，可以根据当前的语言类型，使用传入的key去寻找当前key对应的文本，基础原理如下图：

vue中如何使用i18n实现多语言国际化

前言