vue i18n 国际化-多语言

1.初始化多语言包

多语言切换, 需要用到一个国际化的包 vue-i18n (此示例是基于element-ui)

yarn add vue-i18n@8.22.2

i18n是internationalization这个单词的缩写，取了首字母i和结尾字母n，中间一用有18个字母，所以组合起来就所写成i18n，这是一个用于给vue国际化的插件，它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

2.创建语言包对象

语言包对象最后可能会比较大，属性比较多，所以最好的办法是将其定义成单独的 js 文件，然后再进行整合

src 目录下新建 lang 目录，在其中新建 zh.js（中文）和 en.js（英文）文件（想配置几种语言就配置几个js文件，其中的 “建” 需要一一对应）

zh.js

// 1、创建中文语言包对象
 export default{ 
    table: { 
        username: '用户名',    
        email: '邮箱',   
        mobile: '手机'  
     },  
    menus: {    
        home: '首页',    
        download: '下载'  
     },  
    tabs: {  
        info: '商品描述',  
        comment: '评价'  
     } 
    }

en.js

// 2、创建英文语言包对象
    export default {   
    table: {     
        username: 'Username',    
        email: 'Email',    
        mobile: 'Mobile'  
     },  
    menus: {     
        home: 'Home',     
        download: 'DownLoad'  
     },   
    tabs: {  
        info: 'Describe',  
        comment: 'Comment On' 
     }
    }

3.整合语言包文件

我们将整合语言包对象和创建 VueI18n 实例并配置的过程写到一个 js 文件中，然后在 main.js 中导入

这样 main.js 中代码就会简练很多，毕竟 main.js 中只是最后需要一个 VueI18n 的实例即可!

在lang 目录下创建 index.js 代码如下

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import Cookies from 'js-cookie' // 引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
import customZH from './zh' // 引入自定义中文包
import customEN from './en' // 引入自定义英文包
Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
export default new VueI18n({
  // 指定语言类型
  locale: Cookies.get('language') || 'en', // 从cookie中获取语言类型 获取不到就是英文
  // 准备语法的翻译环境
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN // 将饿了么的英文语言包引入
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH
    }
  }
})

4.在 main.js 中引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from '@/lang'

Vue.config.productionTip = false
 
// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
    
new Vue({
  el: '#app',
  //挂载 i18n
  i18n,
  render: h => h(App)
})

现在我们就可以尝试去测试一下，利用 $t 方法, 使用测试

<div class="home">
    {{ $t('menus.home') }}
    <span>{{ $t('menus.download') }}</span>
</div>

5.切换语言

当前如果切换语言，需要手动修改如下代码中的 locale 的值

// 创建国际化插件的实例
export default new VueI18n({
  // 指定语言类型
  locale: Cookies.get('language') || 'en', // 从cookie中获取语言类型 获取不到就是英文
  // 准备语法的翻译环境
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN // 将饿了么的英文语言包引入
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH
    }
  }
})

手动修改 en 和 zh, 很显然太麻烦了, 我们可以准备一个下拉菜单, 提供选择语言的功能

步骤:

1). 封装多语言切换的组件

src/components/LangurAge/index.vue

<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon style="fill: black;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>
import Cookies from 'js-cookie'
export default {
  methods: {
    changeLanguage(lang) {
      Cookies.set('language', lang) // 切换多语言
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
// this.$i18n.locale = '语言字符串'  切语言
</script>

2). 全局注册组件

main.js

// 引入 
import LangurAge from '@/components/LangurAge'
// 注册为全局组件
Vue.component('LangurAge',LangurAge)

3). 使用

<LangurAge />