本文共 1043 字，大约阅读时间需要 3 分钟。
vue-i18n是用于多语言适配的vue插件，主要用于前端项目的国际化应用。
个简单的例子：
getting started {
{ $t("message.hello") }}
我们可以看到vue-i18n的使用非常的简单，我们只需要定义好对应的语言包messages，然后设置一个默认语言类型locale，然后实例化出一个i18n对象并传入我们的vue实例就可以愉快的使用起来
ps：插值表达式中的$t就是vue-i18n暴露给用户的API
<template>
<div>
<h1>{
{$t('message.hello')}}{ {$i18n.locale}}</h1><div>{
{$i18n.messages}}</div><div></div>
<el-button type="primary" @click="open">{
{$t('btn.text')}}</el-button></div>
</template>
<script>
import { getProjectList } from "api/basicInfoService/project/index";
export default {
data() {
return {
projectOptions: null
}
},
created() {
getProjectList().then(response => {
this.projectOptions = response;
console.log(response)
this.$i18n.mergeLocaleMessage('zh', this.projectOptions)
}) .catch((err) => {
this.$message.error(this.$t('message.hello') + ':' + err.message)
});
},
methods: {
}
}
</script>
$i18n.locale来选择性显示相应的语言 项目用的是vue-cli框架，i18n.locale是自动监听变化的
这里this.$i18n.messages就是多语言切换的数据来源
vue-i18n的mergeLocaleMessage方法 新加载的数据合并到全局
源码地址
原理解析
转载地址：http://bcvob.baihongyu.com/