项目从vue2 升级vue3，VueI18n需要做适当的调整。主要是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 创建的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 (
{this.$t('国际化示例')}
);
},
});
但是 在step 函数中，需要
import { defineComponent } from 'vue';
import { Exception } from 'bkui-vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
setup() {
const { t } = useI18n();
return () => (
{t('无业务权限')}