项目从vue2 升级vue3,VueI18n需要做适当的调整。主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化:
具体可以参看:Breaking Changes | Vue I18n
Vue I18n v8.x:
import?Vue?from?'vue'
import?VueI18n?from?'vue-i18n'
Vue.use(VueI18n)
const?i18n?=?new?VueI18n({
??//?...
})
new?Vue({
??i18n,
??//?...
})
Vue I18n v9 or later:
import?{?createApp?}?from?'vue'
import?{?createI18n?}?from?'vue-i18n'
const?i18n?=?createI18n({
??//?...
})
const?app?=?createApp({
??//?...
})
app.use(i18n)
Reason: Vue 3 Global API changes, and Vue 3 API architecture changes related for component instances.
bkui-cli 创建的vue2项目(magicBox组件库升级
vue2?
"vue-i18n": "^8.26.8",
import?Vue?from?'vue';
import?VueI18n?from?'vue-i18n';
import?chineseJson?from?'../lang/zh-cn.json';
import?englishJson?from?'../lang/en.json';
import?dayjs?from?'dayjs';
import?'dayjs/locale/zh-cn';?//?import?locale
import?{?getCookie?}?from?'@/utils';
Vue.use(VueI18n);
let?currentLang?=?getCookie('blueking_language')?||?'zhCN';
if?(currentLang?===?'en')?{
??currentLang?=?'enUS';
??dayjs.locale('en');
}?else?{
??currentLang?=?'zhCN';
??dayjs.locale('zh-cn');
}
const?i18n?=?new?VueI18n({
??locale:?getCookie('blueking_language')?||?'zh-cn',
??fallbackLocale:?'zh-cn',
??silentTranslationWarn:?true,
??messages:?{
????en:?{?...englishJson?},
????'zh-cn':?{?...chineseJson?},
??},
});
window.i18n?=?i18n;
export?default?i18n;
vue3
"vue-i18n": "^9.1.10",
import?{?createI18n?}?from?'vue-i18n';
import?dayjs?from?'dayjs';
import?'dayjs/locale/zh-cn';?//?import?locale
import?{?getCookie?}?from?'@/utils/utils';
import?chineseJson?from?'../lang/zh-cn.json';
import?englishJson?from?'../lang/en.json';
let?currentLang?=?getCookie('blueking_language')?||?'zhCN';
if?(currentLang?===?'en')?{
??currentLang?=?'enUS';
??dayjs.locale('en');
}?else?{
??currentLang?=?'zhCN';
??dayjs.locale('zh-cn');
}
const?i18n?=?createI18n({
??locale:?getCookie('blueking_language')?||?'zh-cn',
??fallbackLocale:?'zh-cn',//?设置备用语言
??silentTranslationWarn:?true,
??globalInjection:?true,
??messages:?{
????en:?{?...englishJson?},
????'zh-cn':?{?...chineseJson?},
??},
});
//?window.i18n?=?i18n;
export?default?i18n;
注意:globalInjection 为true
使用注意事项:
在vue模板()中与?defineComponent render 函数中直接使用this.$t 是没有任何问题的。
import?{?defineComponent?}?from?'vue';
import?{?Exception?}?from?'bkui-vue';
export?default?defineComponent({
??props:?{
????type:?String,
????msg:?String,
??},
??render()?{
????return?(
????????????<Exception?class='exception-wrap-item'?type={this.type}>
????????????????<span>{this.$t('国际化示例')}</span>
????????????</Exception>
????);
??},
});
但是 在step 函数中,需要
import?{?defineComponent?}?from?'vue';
import?{?Exception?}?from?'bkui-vue';
import?{?useI18n?}?from?'vue-i18n';
export?default?defineComponent({
??setup()?{
????const?{?t?}?=?useI18n();
????return?()?=>?(
?????<div>
???????<Exception??class="exception-wrap-item"?type="403">
???????????<span>{t('无业务权限')}</span>
???????????<div?class='text-subtitle'>{t('你没有相应业务的访问权限,请前往申请相关业务权限')}</div>
???????????<div?class='text-wrap'>
???????????????<span?class='text-btn'>{t('请联系管理员添加')}</span>
???????????</div>
???????</Exception>
?????</div>
????);
??},
});
具体参看:
TypeScript Support | Vue I18n
切换语言
这个和vue2 一样的
<template>
????<div>
????????<div?@click="changeLang('en')">English</div>
????????<div?@click="changeLang('zh')">中文</div>
????</div>
</template>
<script?setup>
import?{?useI18n?}?from?'vue-i18n'
const?{?locale?}?=?useI18n()
const?changeLang?=?(lang:?string)?=>?{
??locale.value?=?lang
??localStorage.setItem('lang',?lang)//?getCookie('lang',lang)
??刷新页面
}
</script>
转载本站文章《vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9》, 请注明出处:vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9 - vue3学习笔记 - 周陆军的个人网站
|