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: <App/>
})

国际化使用

解决ant-design-vue组件国际化

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

解决vue-i18n国际化

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

在app.vue中进行设置

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

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

<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <div>
        <button @click="changeLocale(en-us)" v-show="localeval==zh-cn">English</button >
        <button @click="changeLocale(zh-cn)" v-show="localeval==en-us">中文</button >
      </div>
    <router-view/>
    </div>
  </a-locale-provider>
</template>

<script>
import zhCN from ant-design-vue/lib/locale-provider/zh_CN
import moment from moment
import moment/locale/zh-cn
moment.locale(zh-cn)
const EN = en-us
const ZH = zh-cn
export default {
  name: App,
  data () {
    return {
      locale: zhCN,
      localeval: zh-cn
    }
  },
  methods: {
    moment,
    changeLocale (localeval) {
      this.localeval = localeval
      if (localeval === EN) {
        moment.locale(EN)
        this.$i18n.locale = EN
        this.locale = null
      } else {
        moment.locale(ZH)
        this.$i18n.locale = ZH
        this.locale = zhCN
      }
    }
  }
}
</script>

vue-i18n在页面中的使用

<a-pagination showSizeChanger  :defaultCurrent="3" :total="500" />
    <!-- i18n使用$t(key的名称)-->
    <span>{
         
  {$t(title.home)}}</span>

效果展示

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