125、Ant-design-vue + vue-i18n配置前端国际化

需求

项目基于Vue进行开发，使用了ant-design-vue框架，然后需要做国际化。此时做国际化需要考虑两方面的国际化，一个是ant-design-vue内部组件的国际化，一个是国际化我们的业务显示，业务显示我们选用vue-i18n进行国际化。

安装依赖

# 安装ant-design-vue
npm i --save ant-design-vue
# 安装vue-i18n
npm install vue-i18n --save

建国际化文件

在src包下新建common文件夹，在common文件夹中建子文件夹lang，并新建en-us.js和zh-cn.js，目录结构如下：

文件内容如下：
en-us.js

module.exports = {
  title: {
    home: 'home',
    message: 'message',
    code: 'code'
  }
}

zh-cn.js

module.exports = {
  title: {
    home: '首页',
    message: '信息',
    code: '技术评估'
  }
}

注:国际化文件中，以Key-Value对应的格式，中文和英文国际化的key保持一致，只是value不同而已

引用

在main.js中引入ant-design-vue和vue-i18n，以及建好的国际化文件。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import VueI18n from 'vue-i18n'
import LangENUS from './common/lang/en-us'
import LangZHCN from './common/lang/zh-cn'

Vue.config.productionTip = false
Vue.use(Antd)
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-cn',
  messages: {
    'en-us': LangENUS,
    'zh-cn': LangZHCN
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: ''
})

国际化使用

解决ant-design-vue组件国际化
在ant-design的官网上可以看见，ant-design默认组件的语言方式是英文的，可以通过LocaleProvider来解决

解决vue-i18n国际化

我们在main.js中注册挂载了i18n后，通过this.$i18n.locale = **，就可以设置语言。

在app.vue中进行设置

根据上文的讲解，我们需要在app.vue中进行设置。关键点如下：

• 使用a-locale-provider包裹所有元素，是为了解决ant-design-vue的组件国际化。
• 使用this.$i18n.locale = **，可以设置语言
• 采取的交互方式是，默认是中文，页面显示按钮为英文，点击后切换成英文，按钮显示成中文。

vue-i18n在页面中的使用

    
    
    {{$t('title.home')}}

效果展示

默认显示中文，按钮为英文

点击English按钮，切换成中文。组件和对应的文字都进行了改变。