• 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

  • 相关阅读:
    【vue】elmentUI封装自定义表单组件
    好好回答下 TCP 和 UDP 的区别
    模型的网页我可以正常访问（不知道是不是挂了梯子的原因）但是pycharm里就报错无法访问
    学习周报02
    2022 年 JavaScript 开发工具的生态，别再用过时的框架了
    Java 代理模式
    软件测试＜进阶篇--＞测试分类＞
    gin & gorm学习笔记
    浅析DispatchProxy动态代理AOP
    vue3入门(总结)
  • 原文地址：https://www.cnblogs.com/zhoulujun/p/16398213.html