4

vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9 - zhoulujun

 1 year ago
source link: https://www.cnblogs.com/zhoulujun/p/16398213.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9

项目从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组件库升级

"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;

"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>
);
},
});

具体参看：

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>

转载本站文章《vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8835.html


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK