i18n是什么？

i18n(其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数)是“国际化”的简称.

场景

这是我第一次遇到国际化的需求,也是第一次在掘金发表的文章,我估计是一个插件或者是一个包之类的东西,装完以后配一下就好了,今后会在此专栏记录自己遇到过的各种需求和问题.

如何使用

安装

npm install vue-i18n

引入插件

在main.js中

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use (VueI18n)

注册实例

在main.js中

const i18n = new VueI18n({
locale: 'zh',
message: {
// 在message中定义各种语言的键值对
    en: {
    loginTxt: 'login',
    change: 'change'
    },
    zh: {
    loginTxt: '登录',
    change: '切换'
    }
   }
  })
  
  new Vue({
  router,
  store,
  i18n,
  render:h=>h(App)
  }).$mount('#app')

使用

这个时候在模板中就不能传统写法了:

<button>登录</button>

而是应该去那个配置文件的对象中读取对应语言的那个值:

模板：

<button>{{$t('loginTxt')}}</button>

"$t"就是i18n在Vue上挂载的属性.

此时如果在main.js中修改"locale"属性值为"en"就可以看到按钮名字变成login了,但用户肯定不在这里修改啊,用户需要一个按钮,单击修改这个属性,所以接下来要给一个按钮,专门来切换这个语言.

    <button @click="changeLanguage">{{$t('change')}}</button>

    changeLanguage(){
    // 假设该场景只有"zh""en"两种语言
    if(this.$i18n.locale="zh") {
         this.$i18n.locale="en"
        } else  {
            this.$i18n.locale="zh"
        }
    }

以上就是引入i18n国际化的全过程,但工作中可能是新接手的项目,人家都已经配好了,会有专门的文件来存放他国语言的key-value,而使用时就要从这个文件引入,但区别不大,本质还是这些东西.

学习来源: b站视频 BV18i4y1w7gG