使用i18n实现vue2+ant UI的多语言配置

一、前言

• 项目基于Vue2.x进行开发，使用了ant-design-vue框架，需要做国际化
• 此时需要考虑两方面： - ant-design-vue内部组件的国际化- 页面展示内容的国际化。

二、技术介绍

i18n：Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

i18n的官网地址安装 | Vue I18n (kazupon.github.io)

三、搭建流程

本文是使用vue2.x + ant-design-vue 搭建的项目，对于ant框架的使用不会做过多的说明

1、安装插件

• 注意：vue2.x要安装第8版本，vue3.x安装第9版本

# 安装vue-i18
npm install vue-i18n@8

2、创建i18n文件index.js

在src目录中创建i18n文件夹，在文件夹中创建index.js文件，用于全局配置多语言文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 引入自定义的各个语言配置文件
import zh from './config/zh'
import en from './config/en'
//ant-ui自带多语言配置
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import enUs from 'ant-design-vue/es/locale/en_US'
Vue.use(VueI18n)

// 各个国家语言包
const messages = {
  en: {
    ...en,
    ...enUs
  },
  zh: {
    ...zh,
    ...zhCN
  }
}

export default new VueI18n({
  locale: localStorage.getItem('change-language') || 'zh-CN',
  messages,
  silentTranslationWarn: true // 忽略翻译警告
})

3、创建语言包

在i18n文件夹中创建config文件夹，在里面设置多语言包，en.js / cn.js

zh.js

const zh = {
  Language: '中文',
  Login: {
    rememberMe: '记住账号',
    login: '登录',
    enterUsername: '请输入您的账号',
    enterPassword: '请输入您的密码'
  }
}
export default zh

en.js

const en = {
  Language: 'English',
  Login: {
    rememberMe: 'Remember Me',
    login: 'Login',
    enterUsername: 'Please enter your username',
    enterPassword: 'Please enter your password'
  }
}
export default en

4、 创建动态切换语言文件change-language.vue

change-language.vue

<template>
  <a-dropdown>
    <div class="main">
      <img src="../assets/language.png" style="height: 15px;" />
      <div style="margin-left: 3px;color: #fff;">{{ $t('Language') }}</div>
    </div>
    <a-menu slot="overlay" @click="handle">
      <a-menu-item v-for="(item, index) of list" :key="item.key">
        {{ item.name }}
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
export default {
  name: 'change-language',
  data() {
    return {
      list: [
        { key: 'zh-CN', name: '中文' }, // 中文
        { key: 'en', name: 'English' } // 英语
      ]
    }
  },
  methods: {
    handle(value) {
      this.$i18n.locale = value.key
      localStorage.setItem('change-language', value.key)
      location.reload() //强制刷新
    }
  }
}
</script>

<style scoped>
.main {
  /* width: 60px; */
  /* border: 1px solid #fff; */
  /* border-radius: 5px; */
  padding: 1px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

文件创建如下：

这里把选择的语言类型储存到本地缓存

localStorage.setItem('change-language', value.key)

5、main.js引入i18n配置文件

// i18n多语言
import i18n from './i18n'
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

6、动态切换语言组件使用

<template>
  <div style="position: absolute; top: 50%; right: 50%;">
    <div>动态语言切换</div>
    <!-- 添加 ChangeLanguage 组件 -->
    <ChangeLanguage></ChangeLanguage>
  </div>
</template>

<script>
import ChangeLanguage from '@/i18n/change-language'

export default {
  components: {
    ChangeLanguage
  }
}
</script>

组件使用情况如下：

7、在页面内调用

i18n 已经挂载到 Vue 实例上了，在页面中直接使用 $t 方法，可以通过指定键(key)来获取对应语言的翻译文本。

在template中直接使用，如下：

  $t('Login.login') 

{{ $t('Login.login') }}

在script中使用，如下：

   this.$t('Login.login')

和在template中直接使用的区别就是在前面加上了this

四、写在最后

需要注意的是，由于语言的差异性，同一句话在切换语言的时候，因为文字的长度不同，导致页面上的样式结构错位。因此可能需要准备两套的样式，根据不同语言，动态的去切换每个页面根元素的class。

~~~ end ~~~