国际化,就是你的项目有国外客户.你要根据用户处在的地理位置,在你的项目中显示当地的语言.仅此而已.
比如:
- 中国人,项目里显示中文.
- 日本人,项目里显示日文.
- 美国人,项目里显示英文.
- ....
使用vue-i18n来解决这个问题,极其简单.
vue 使用 vue-i18n 来处理国际化问题.
- step 1. 安装
vue-i18n库
npm i vue-i18n@7 --save # 这里安装 7 版本是基于 vue2 项目.
- step 2. 配置
vue-i18n库.
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 插件注册
// 创建 VueI18n 实例
const vueI18n = new VueI18n({
locale: 'zh',
messages: {
zh: {
login: '登录',
register: '注册',
changeLanguage: '切换语言'
},
en: {
login: 'login',
reigster: 'register',
changeLangugae: '切换语言'
}
}
})
new Vue({
...,
i18n, // 根组件实例挂在.
}).$mount('#app')
- step 3 在模板中使用
$t函数调用即可.
<template>
<button>{{$('login')}}</button>
<button>{{$('register')}}</button>
<button>{{$('changeLangugae')}}</button>
</template>
- step 4 当你需要切换语言时
<button>{{ $t("login") }}</button>
<button>{{ $t("register") }}</button>
<button @click.stop="changeLanguage">{{ $t("changeLanguage") }}</button>
methods: {
changeLanguage() {
this.$i18n.locale = this.$i18n.locale === "zh" ? "en" : "zh";
},
},
基本效果如下
国际化.gif
vue-i18n 这个库解决国际化的 API 十分简单.
但有几个点让我们注意:
-
this.$i18n.locale='xx'在修改了配置后,页面自动刷新,所以这一块是响应式的. - 内部是使用当前组件实例的
vm.$forceUpdate()来实现的.
自己实现一个国际化工具.
在了解了 vue-i18n 的基本原理后,自己实现一个 i18n 的轮子也很简单.
基本实现步骤如下:
- 实现一个 Vue 的插件.
MyI18n是一个构造函数(new MyI18n())也是一个插件函数(Vue.use(MyI18n)). - 当
MyI18n作为插件或者构造函数调用时,分别处理有对应的处理逻辑.- 当
MyI18n作为构造函数时,需要创建一个实例,实例主要记录用户传递的messages以及locale属性.- 由于后期在调用
myi18n.locale时,需要更新界面,所以,将 locale 定义成响应式的属性. - 在调用
this.$myi18n.locale=newvalue需要在locale的setter里面调用vm.$forceUpdate()来更新视图.
- 由于后期在调用
- 当
MyI18n作为插件时候.- 在
Vue.prototype上挂在$tt方法,由于返回key对应的国际化值(这个不需要是响应式). - 此时,由于
$tt是在模板中使用的,我们需要在调用此此函数的时候,将当前组件实例传入({{$tt('login',vm)}})
- 在
- 当
实现代码如下:
import Vue from 'vue'
export default function MyI18n (config) {
// 如果是 new 调用
if (this instanceof MyI18n) {
// 将 locale 属性设置成响应式,在 setter 的时候,拿到 vm 实例,调用 vm.$forceUpdate() 去更新视图.
this.defineLocaleReactive(config.locale)
// 单独记录 messages
this.messages = config.messages
Vue.prototype.$myi18n = this // 记录当前实例,全局只有一个
} else {
// 传递
Vue.prototype.$tt = function (keychain, vm) {
// 链式获取当前属性的值.
const value = getValueByKeychain(Vue.prototype.$myi18n.messages[Vue.prototype.$myi18n.locale], keychain)
// 在模板中记录当前的组件实例对象
Vue.prototype.$myi18n_vm = vm
// 返回链式调用的结果,在界面显示(这一步不需要响应式)
return value
}
}
}
MyI18n.prototype.defineLocaleReactive = function (locale) {
Object.defineProperty(this, 'locale', {
get () {
return locale
},
set (v) {
locale = v
// 当调用 this.$myi18n.locale 时,需要更新视图.
updateView()
}
})
}
let updateView = function () {
// 视图更新
Vue.prototype.$myi18n_vm.$forceUpdate()
}
// 支持链式属性值获取 (a.b.c.d)
function getValueByKeychain (object, keychain) {
const keys = keychain.split('.')
let finallyValue = object
for (let i = 0; i < keys.length; i++) {
finallyValue = finallyValue[keys[i]]
}
return finallyValue
}
使用
import MyI18n from './MyI18n'
Vue.use(MyI18n)
new MyI18n({
locale: 'zh',
messages: {
zh: {
login: '登录',
register: '注册',
changeLanguage: '切换语言'
},
en: {
login: 'login',
register: 'register',
changeLanguage: 'changeLanguage'
}
}
})
// console.log(Vue.prototype.$myi18n);
在组件中使用:
<template>
<div class="hello">
<h2>MyI18n 测试</h2>
<button>{{ $tt("login", vm) }}</button>
<button>{{ $tt("register", vm) }}</button>
<button @click.stop="changeLanguage">
{{ $tt("changeLanguage", vm) }}
</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App",
};
},
created() {
this.vm = this; // 缓存当前组件本身
},
methods: {
changeLanguage() {
this.$myi18n.locale = this.$myi18n.locale === "zh" ? "en" : "zh";
},
},
};
</script>
效果如下:
my-国际化.gif
