语言包实现

语言包思路

分别配置中文语言包和英文语言包

//  lib/zh.js 文件中

module.exports = {
  hello:'你好'
}

//  lib/en.js 文件中

module.exports = {
  hello:'Hello'
}

配置语言包

const zh = require('./lib/zh')
const en = require('./lib/en')

const obj = {
  //  表示当前使用的语言包
  locale:'zh',
  //  配置语言包
  messages:{
    zh:zh,
    en:en
  },
  $t:function(key){
    //  this.messages[this.locale] 可以得到当前语言包
    //  key 表示语言包对象中的键
    return this.messages[this.locale][key]
}

obj.$t()

语言包实现的原理：键值对的匹配关系

Vue 中多语言实现

安装国际化的包 npm i vue-i18n@8.22.2

单独配置一个多语言的实例化文件

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的包

Vue.use(VueI18n) // 全局注册国际化包

//  导入语言包
import zhLocale from './zh'
import enLocale from './en'

//  实例化一个 i18n 对象
const i18n = new VueI18n({
  locale: 'zh',  //  当前语言包的类型
  messages: {
    zh:zhLocale,
    en:enLocale
  }
})

export default i18n

在 main.js 文件中导入

//  导入 i18n 实例
imprt i18n from '@/lang'

new Vue({
  el:'#app',
  i18n,  // 挂载 i18n , 然后所有的组件都会有 $t 方法
  render: h => h(App)
})