多语言国际化支持

一.目标:实现elementUI中英文切换功能

1.1 安装国际化的包

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

1.2.ElementUI多语言配置

创建src/lang/index.js, 内容如下：

    // 进行多语言支持配置
    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.验收效果

在src/lang/index.js中手动修改locale属性，改成zh 或者 en

二:自定义内容多语言配置:在项目中使用自定义中英文配置

2.1 引入自定义多语言配置

|- src
	 |-lang
				|-index.js
				|-en.js # 从资源包中拷入的
				|-zh.js # 从资源包中拷入的

2.2lang/index.js下进行导入配置

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    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: 'zh',
      messages: {
        en: {
          ...elementEN, // 将饿了么的英文语言包引入
    +     ...customEN   // 将自定义英文包加入
        },
        zh: {
          ...elementZH, // 将饿了么的中文语言包引入
    +     ...customZH   // 将自定义中文包加入
        }
      }
    })

2.3用$t('属性名')来生成标题

这里的$t是引入了i18n之后，自动挂载在vue实例上的功能

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

2.4手动将locale进行en和zh切换查看效果

    export default new VueI18n({
      // 切换这里试试 en
      locale: 'zh'
      ...
    })

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

3.1目标:点击中英文按钮，弹出下拉框，当我们点击中文和en的时候可以实现动态的切换当前的语言

解决思路:点击下拉框时把当前选择的语言赋值给this.$i18n.locale属性即可

3.2封装多语言组件

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

    <template>
      <el-dropdown trigger="click" @command="changeLanguage">
        <div>
          <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
           //注意：icon-class="language" 需要在`src\icons\svg`下有一个名为language.svg的文件
        </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>

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

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

3.4 在Navbar组件中引入使用组件

    <!-- 语言包 -->
    <lang class="right-menu-item" />
    <!-- 全屏组件 -->
    <screen-full class="right-menu-item" />