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的官网上可以看见，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按钮，切换成中文。组件和对应的文字都进行了改变。