項(xiàng)目從vue2 升級vue3，VueI18n需要做適當(dāng)?shù)恼{(diào)整。主要是Vue I18n v8.x 到Vue I18n v9 or later 的變化，其中初始化：
具體可以參看：https://vue-i18n.intlify.dev/guide/migration/breaking.html
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 創(chuàng)建的vue2項(xiàng)目（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',//?設(shè)置備用語言
??silentTranslationWarn:?true,
??globalInjection:?true,
??messages:?{
????en:?{?...englishJson?},
????'zh-cn':?{?...chineseJson?},
??},
});
//?window.i18n?=?i18n;
export?default?i18n;
注意：globalInjection 為true
使用注意事項(xiàng)：
在vue模板()中與?defineComponent render 函數(shù)中直接使用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 函數(shù)中，需要
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('無業(yè)務(wù)權(quán)限')}</span>
???????????<div?class='text-subtitle'>{t('你沒有相應(yīng)業(yè)務(wù)的訪問權(quán)限，請前往申請相關(guān)業(yè)務(wù)權(quán)限')}</div>
???????????<div?class='text-wrap'>
???????????????<span?class='text-btn'>{t('請聯(lián)系管理員添加')}</span>
???????????</div>
???????</Exception>
?????</div>
????);
??},
});
具體參看：
https://vue-i18n.intlify.dev/guide/advanced/typescript.html#resource-keys-completion-supporting
切換語言
這個和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>
轉(zhuǎn)載本站文章《vue2升級vue3：vue2 vue-i18n 升級到vue3搭配VueI18n v9》,
請注明出處：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8835.html
