Li RUONAN


一枚行走在前端道路上的程序媛 ~~


i18n

最近项目重构,为了适应项目需求,leader让我看看国际化~

官网上说:

Vue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application. Features includes:

  • Various formats localization
  • Pluralization
  • DateTime localization
  • Number localization
  • Component based localization
  • Component interpolation
  • Fallback localization
  1. 格式化的内容,基本上是语种、时间、货币等需要本地化的数据,通过使用不同的配置,渲染不同的数据
  2. 支持自定义接口,可以扩展不能的方法
  3. 后备化处理,健壮性也比较好

Vue i18n + ElementUI 可以实现国际化通用配置。简单写一下,需要引入的配置:

i18n-init.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const messages = {
en: {
message: 'hello',
...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
},
zh: {
message: '你好',
...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'en', // set locale
messages, // set locale messages
})

Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')

还可以实现懒加载,异步引入语言 https://kazupon.github.io/vue-i18n/guide/lazy-loading.html