IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9 -> 正文阅读

[JavaScript知识库]vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9

项目从vue2 升级vue3,VueI18n需要做适当的调整。主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化:

具体可以参看:Breaking Changes | Vue I18n

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

具体参看:

TypeScript Support | Vue I18n

切换语言

这个和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》,
请注明出处:vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9 - vue3学习笔记 - 周陆军的个人网站

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-26 16:49:40  更:2022-06-26 16:50:14 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 10:50:08-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码