vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9
tjk 2022-08-19 21:43:09 2022-08-19 41 0
项目从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 localeimport { 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 localeimport { 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