vue国际化初探

安装

npm install vue-i18n

基本使用

我假设你的项目是基于vue-cli创建的。
main.js文件如下：

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    zh: {
        msg: '你好世界'
    },
    en: {
        msg: 'hello world'
    } 
  },
})
new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

App.vue文件如下：

// App.vue
<template>
  <h4>{{ $t('msg') }}</h4>
</template>

以上就是vue-i18n的最简单使用，我们发现上面的例子存在一些问题，例如默认是英文，没有根据用户的设置来动态初始化，还有我们无法实现各种语言的切换，国际化的时候对于数字时间日期是如何处理呢等等许多问题。

更多用法

针对上面的问题，我们可以做出相对应的优化。

• 根据用户语言动态初始化。

  let lang = (navigator.languages && navigator.languages[0]) || navigator.language
  lang = lang.split('-')[0]
  

• 利用下拉框或按钮实现语言的切换。

   changeLang() {
     const lang = this.$i18n.locale
     this.$i18n.locale = lang==='zh'?'en':'zh'
   }
  

• 设置国际化时时间日期数字的处理方式。

   const numberFormats = {
     'zh': {
         currency: {
         style: 'currency',currency:'CNY'
         }
     },
     'en': {
         currency: {
         style: 'currency',currency:'USD',minimumFractionDigits:3
         }
     }
   }
  
   const dateTimeFormats = {
     'zh': {
         short: {
           year: 'numeric', month: '2-digit', day: '2-digit',
         }
     },
     'en': {
         short: {
           year: 'numeric', month: '2-digit', day: 'numeric',weekday:'long'
         }
     }
   }
  
   let lang = navigator.language || (navigator.languages&&navigator.languages[0])
   const i18n = new VueI18n({
     locale: lang.split('-')[0],
     messages: {
       zh,
       en 
     },
     numberFormats,
     dateTimeFormats
   })
  

• 语言文件单独放在一个文件中，利于后期维护。
  效果截图：

  
  中文

英文

我们可以看到表格中的时间日期与数字均按照我们设置的指定格式所展示。例如英文数字小数点后面最少三位，英文日期有带星期，中文日期日子都是2位的等等。

总结

万变不离其宗，我们发现国际化的步骤都是一样的。

1. 安装对应的国际化包，如vue-i18n。
2. 准备不同语言的语言文件（需要进行国际化的文本）。
3. 在项目启动时根据用户的语言自动加载对应语言文件，在需要国际化的地方按照对应的语法进行文本替换。

参考资料

vue-i18n
为了学习国际化，简单的写了一个国际化demo，上面的例子都在demo 里面可以找到，有需要的可以自行下载，欢迎各位star。
另外还有一篇react国际化的文章，点这里