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:

1 2 3 4 5 6 7 8 9 10 11 12 13

import Vue from 'vue' import VueI18n from 'vue-i18n'   Vue.use(VueI18n)   const i18n = new VueI18n({   // ... })   new Vue({   i18n,   // ... })

Vue I18n v9 or later:

1 2 3 4 5 6 7 8 9 10 11

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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 是没有任何问题的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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 函数中，需要

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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 一样的

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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