i18n前端国际化

国际项目 国外项目 语言快速切换

i18n从前端角度可以看成是一个模块。

例如，不同国家不同文化看时间，或者文字都是不一样的。为了统一标=标准，例如在国内调用时间插件的话，立马就符合中国人的习惯。或者一些公共的文案例如，按钮“确定”，“取消”。只要调用一个参数就行不管你是哪个国家的。

国际化重点：
1、 语言
语言本地化
2、 文化
颜色、习俗等
3、 书写习惯
日期格式、时区、数字格式、书写方向
备注：项目中会兵分两路，一路是语言的国际化，另一路主要为文化国际化

产品设计之初引入国际化标准，符合项目的开发流程。
国内主要主要三点，一个是港澳台采用中文繁体+英文，内陆通俗中文简体，新疆等地区采用文化标准。

*缺点，操作配置繁琐复杂

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

或者

npm install vue-i18n --save-dev

vue-I18n暴露$t对象进行应用，例如jquery暴露的是$

import VueI18n from 'vue-i18n'
/* 平台国际语言静态字典 */
import LangEn from './lang/en'
import LangZhCHS from './lang/zhCHS'
import LangZhCHT from './lang/zhCHT'
/* vue-i18n注册 */
Vue.use(VueI18n)
// 设置语言项
const i18n = new VueI18n({
  locale: 'zhCHS',
  messages: {
   'en': LangEn,
   'zhCHS': LangZhCHS,
   'zhCHT': LangZhCHT
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  components: { App },
  template: '<App/>'
})

zhCHS.js
通过exports

module.exports = {
  buttom: {
   cancel: '取消',
   determine: '确定',
   login: '登陆',
   signOut: '退出登陆',
   registered: '注册',
   search: '查询',
   submit: '提交',
   save: '保存'
 }
}

Example.vue
通过进行数据绑定例子中初始化先检查浏览器默认语言，并保存到中通过i18n.locale可以随意切换版本

<v-btn flat>{{$t('buttom.cancel')}}</v-btn>
 <v-btn-toggle v-model="icon">
  <v-btn flat value="zhCHS">
  <span>中文</span>
  <v-icon>format_align_left</v-icon>
</v-btn>
<v-btn flat value="en">
  <span>English</span>
  <v-icon>format_color_text</v-icon>
</v-btn>



watch: {
 icon (val) {
 this.$i18n.locale = val
 this.setLocalStorage('PLAY_LANG', val)
}
},
created () {
 let lang = this.getLocalStorage('PLAY_LANG')
 if (lang) {
  this.icon = lang
 } else {
  let defaultLang = this.getNavigatorLang() // 获取浏览器设置语言
  this.setLocalStorage('PLAY_LANG', defaultLang)
  this.icon = defaultLang
}
}

还能根据你不同国家快速切换语言

如果你是做国际项目就推荐使用

https://segmentfault.com/a/1190000014241037