项目从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 (

            <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

vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9的更多相关文章

  1. 手写 Vue 系列 之 从 Vue1 升级到 Vue2

    前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...

  2. vue1升级到vue2的问题

    router 不能用map方法了,需要改router的结构改为 routers= [ { // 当没有匹配路由时默认返回的首页        path:'/index',        compone ...

  3. &lt;未测&gt;源码升级安装glibc和rpm升级glibc

    源码升级安装glibc和rpm升级glibc http://jacklin9.spaces.live.com/blog/cns!A891B52E1182AFB2!346.entry http://bl ...

  4. 探索Oracle之数据库升级七 11gR2 to 12c 升级完毕后插入PDB

    探索Oracle之数据库升级七 11gR2 to 12c 升级完毕后插入PDB 前言:        从Oracle 12c開始,引入了容器数据库的概念,能够实现数据库插拔操作,例如以下图: 如今我们 ...

  5. CentOS 升级 Python3 （附带: 一键升级脚本）

      升级环境   应用名称 版本 Python 3.5.2 Syatem CentOS 6.7         升级方法   [1]下载 Python 3: wget http://mirrors.s ...

  6. Jenkins升级；yum 安装软件升级

    1.使用yum安装的jenkins升级方法: 先升级yum yum update 后升级jenkins yum update jenkins 但是上面的方法,限制于yum的版本,不能更新到jenkin ...

  7. 实现乐鑫esp8266的无线OTA升级，实现远程在线升级固件

    代码地址如下:http://www.demodashi.com/demo/12994.html 一.前言: 写了这么多的8266博文,一直以满意100%的心态去敲写代码固件烧录,以致很少出现 bug ...

  8. 在此计算机中仅有部分visual studio2010产品已升级到SP1,只有全部升级,产品才能正常运行

    先说废话: 本人机子刚装系统Win10 专业版 1709 开始安装vs2010的时候中途报错了,有一个什么驱动不兼容,被我给关闭了,继续安装完,然后找不到vs的启动快捷方式,开始里面没有,于是我开始修 ...

  9. ESA2GJK1DH1K升级篇: 快速的移植升级程序到自己的项目(APP用户程序制作)

    前言 用户程序比较简单,但是起着至关重要的作用 用户程序是和BootLoader程序相互配合的 拷贝文件到自己的项目 APP用户程序的 stmflash.c stmflash.h 和 上一节的Boot ...

  10. Veritas NetBackup 8.1.2 升级的主要理由--附升级兼容性检查网址

    管理更简单 NetBackup™ 8.1.2 基于 Web 的全新直观用户界面让操作变得极度简单化,最常用操作现在只需单击几次或触摸几下即可完 成.通过台式机或移动设备可为不同角色的其他用户授予访问权 ...

随机推荐

  1. wordpress电子商务插件和主题的使用方法

    前提步骤:卸载wordpress干净,需要把相应的数据库删除:drop databade **: (1)先改wordpress中重要文件的权限:777 (2)用usradd -d www /html命 ...

  2. ASP.NET MVC请求处理管道生命周期的19个关键环节(13-19)

    在上一篇"ASP.NET MVC请求处理管道生命周期的19个关键环节(7-12) ",体验了7-12关键环节,本篇继续. ⒀当请求到达UrlRoutingModule的时候,Url ...

  3. 非阻塞式socket的select()用法

    Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只 是习惯写诸如 connect.accept.recv或recvfrom这样的阻塞程 ...

  4. javascript对象几种创建方式

    Javascript对象创建的几种方式  1.使用new运算符创建Object  var box=new Object();  box.name='肖能武';  box.age=28;    2.ne ...

  5. js精确计算

    官方文档:http://mikemcl.github.io/big.js/ 使用方法: x = new Big(0.1); y = x.plus(0.2); // '0.3' var a=Big(0. ...

  6. Tornado 网站demo 二

    连接数据库 methods 中建立一个文件 db.py 分别建立起连接对象和游标对象 #!/usr/bin/env Python # coding=utf-8 import pymysql conn ...

  7. IDEA中显示RunDashboard

    在打开.idea/workspace.xml,找到RunDashboard的配置,添加红色字体内容 <component name="RunDashboard"> &l ...

  8. 用Python免费发短信，实现程序实时报警

    进入正文 今天跟大家分享的主题是利用python库twilio来免费发送短信. 先放一张成品图: 代码放在了本文最后的地址中 正文 眼尖的小伙伴已经发现了上面的短信的前缀显示这个短信来自于一个叫Twi ...

  9. MySQL面试题和答案

    Mysql 的存储引擎,myisam和innodb的区别. 答: 1.MyISAM 是非事务的存储引擎,适合用于频繁查询的应用.表锁,不会出现死锁,适合小数据,小并发. 2.innodb是支持事务的存 ...

  10. Eclipse中使用printf报错 提示参数类型不对

    报错信息: The method printf(String, Object[]) in the type PrintStream is not applicable for the argument ...