Vue3 国际化i18n

国际化i18n方案

  • 1. 什么是i18n
  • 2. i18n安装、配置及使用
    • 2.1 安装
    • 2.2 配置
    • 2.3 挂载到实例
    • 2.4 组件中使用
    • 2.5 语言切换

1. 什么是i18n

i18n 是“国际化”的简称。在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件等)无需做大的改变就能够适应不同的语言和地区的需要。

对程序来说,在不修改内部代码的情况下,能根据不同语言及地区显示相应的界面。

在全球化的时代,国际化尤为重要,因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有L10n(“本地化”的简称)。

2. i18n安装、配置及使用

2.1 安装

npm i vue-i18n

2.2 配置

在这里插入图片描述
langs存放各语言文件

en.js

export default {messages:{home:'home',login:'login',userName:'userName',index:'index',monitor:'monitor',order:'order',census:'census',switchLanguage:'switchLanguage',date:'date',name:'name',address:'address'}
}

tc.js

export default {messages:{home:'首頁',login:'登錄',userName:'用戶名',index:'首頁',monitor:'數據監控',order:'訂單信息',census:'統計管理',switchLanguage:'切換語言',date:'日期',name:'姓名',address:'地址'}
}

zh.js

export default {messages:{home:'首页',login:'登录',userName:'用户名',index:'首页',monitor:'数据监控',order:'订单信息',census:'统计管理',switchLanguage:'切换语言',date:'日期',name:'姓名',address:'地址'}
}

message.js

//语言包
import zh from './langs/zh'
import en from './langs/en'
import tc from './langs/tc' //繁体export default { //语言包zh,en,tc
}

index.js

import { createI18n } from 'vue-i18n'
import zh from './langs/zh'
import en from './langs/en'
import tc from './langs/tc'
const messages = {en,zh,tc
}
const i18n = createI18n({legacy:false,locale:localStorage.getItem('lang') ||'zh',messages
})
export default i18n

2.3 挂载到实例

import { createApp } from 'vue'
import i18n from './locals'
createApp(App).use(i18n).mount("#app")

2.4 组件中使用

<template><div>{{title}}<!-- 二种引入方式 --><div>{{$t('messages.userName')}}</div><div v-t="'messages.userName'"></div></div>
</template>

2.5 语言切换

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n();import { ref, reactive } from 'vue'
let title = ref('订单信息');
const langArr = ['home', 'login', 'userName', 'index', 'monitor', 'order', 'census', 'switchLanguage', 'date', 'name', 'address'];
const changeLang = type => {locale.value = type;localStorage.setItem('lang', type)
}
</script><template><ul><li @click="changeLang('zh')">中文</li><li @click="changeLang('en')">英文</li><li @click="changeLang('tc')">繁体</li></ul><ul><li v-for="item in langArr" :key="item">{{ item + ':' }} {{ $t('messages.' + item) }}</li></ul>
</template><style scoped></style>

中文:
在这里插入图片描述
英文:
在这里插入图片描述
繁体:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/363330.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库调优厂商 OtterTune 宣布停止运营

昨天刷到消息&#xff0c;得知数据库优化厂商 OtterTune 停止了运营。OtterTune 的成员主要来自 CMU Andy Pavlo 教授领导的数据库实验室。公司正式成立于 2021 年 5 月&#xff0c;融资了 1450 万美金。 按照 Andy 教授的说法&#xff0c;公司是被一个收购 offer 搞砸了。同时…

NAND闪存原厂铠侠加速推上市,预计10月完成IPO

NAND闪存原厂铠侠Kioxia拟趁着半导体市场回暖及企业财务状况显著提升的契机&#xff0c;加速推进其上市进程。 据报道&#xff0c;公司计划最快于8月底提交IPO申请&#xff0c;目标是在2024年10月末于东京证券交易所完成首次公开募股。此番上市动作不仅反映出市场复苏迹象&…

python爬虫之scrapy框架基本使用

python爬虫之scrapy框架基本使用 1、环境安装&#xff1a;pip install scrapy 2、创建一个工程&#xff1a;scrapy startproject xxxPro 3、cd xxxPro 4、在spiders子目录中创建一个爬虫文件&#xff1a;scrapy genspider spiderName www.xxx.com 5、执行工程&#xff1a;scra…

同步模式之保护性暂停模式

1. Guarded Suspension&#xff1a;一个线程需要等待另一个线程的执行结果 2. 理解 一个线程需要将结果传递给另一个线程&#xff0c;将这两个线程关联到到同一个 GuardedObject 如果需要源源不断地传递结果&#xff0c;需要使用消息队列&#xff08;生产者-消费者模型&…

k8s流控平台apiserver详解

一、简单理解认识apiserver 1.主要功能 认证 鉴权 准入 mutating validating admission 限流 2.概念 apiserver保护etcd&#xff0c;缓存机制&#xff0c;有缓存直接返回&#xff0c;没缓存再去查看etcd,apiserver是担任和其他平台同信并认证 3.访问控制概览…

如何借助ai(文心一言)获取tushare的数据

1. 准备工作 确保已安装python &#xff0c;安装Tushare库 和文心一言的地址&#xff08;文心一言&#xff09;&#xff1a; 注册Tushare账号并获取Token&#xff1a;在Tushare官方网站注册账号&#xff0c;并获取个人Token。如下 tushare地址&#xff1a;&#xff08;点击即…

JVM原理(一):JVM运行时数据区域的分析

1. 程序计数器 程序计数器是一块较小的内存空间&#xff0c;它可以看作是当前线程所执行的字节码的行号指示器。 作用 在Java虛拟机的概念模型里&#xff0c;字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令&#xff0c;它是程序控制流的指示…

服务器安装JDK,Maven等常用环境

生产环境部署服务器需要安装一些常用工具&#xff0c;下面我就把常用的jdk&#xff0c;maven&#xff0c;node&#xff0c;git的安装方法和步骤演示 一、安装JDK环境 执行如下命令&#xff0c;安装JDK,所有命令都是 复制&#xff0c;粘贴&#xff0c;回车 yum install -y jav…

CentOS停更无忧,中国操作系统闯入后CentOS时代

国际开源服务器操作系统CentOS停更&#xff0c;引发了中国操作系统火线进化——开源龙蜥操作系统社区涌现出大量的技术创新&#xff0c;相关创新技术迅速转化为商业化产品。2024年6月&#xff0c;浪潮信息与龙蜥社区联合发布服务器操作系统云峦KeyarchOS V5.8 新版本&#xff0…

5款提高工作效率的免费工具推荐

SimpleTex SimpleTex是一款用于创建和编辑LaTeX公式的简单工具。它能够识别图片中的复杂公式并将其转换为可编辑的数据格式。该软件提供了一个直观的界面&#xff0c;用户可以在编辑LaTeX代码的同时实时预览公式的效果&#xff0c;无需额外的编译步骤。此外&#xff0c;SimpleT…

MySQL高级-SQL优化- update 优化(尽量根据主键/索引字段进行数据更新,避免行锁升级为表锁)

文章目录 0、update 优化1、创建表2、默认是行锁3、行锁升级为表锁4、给name字段建立索引 0、update 优化 InnoDB的行锁是针对索引加的锁&#xff0c;不是针对记录加的锁&#xff0c;并且该索引不能失效&#xff0c;否则会从行锁升级为表锁。 1、创建表 create table course(…

SOBEL图像边缘检测器的设计

本项目使用FPGA设计出SOBEL图像边缘检测器&#xff0c;通过分析项目在使用过程中的工作原理和相关软硬件设计进行分析详细介绍SOBEL图像边缘检测器的设计。 资料获取可联系wechat 号&#xff1a;comprehensivable 边缘可定义为图像中灰度发生急剧变化的区域边界,它是图像最基本…

基于Jmeter的分布式压测环境搭建及简单压测实践

写在前面 平时在使用Jmeter做压力测试的过程中&#xff0c;由于单机的并发能力有限&#xff0c;所以常常无法满足压力测试的需求。因此&#xff0c;Jmeter还提供了分布式的解决方案。本文是一次利用Jmeter分布式对业务系统登录接口做的压力测试的实践记录。按照惯例&#xff0…

Web渗透-逻辑漏洞

一、概述 逻辑漏洞是指由于程序逻辑不严或逻辑太复杂&#xff0c;导致一些逻辑分支不能够正常处理或处理错误&#xff0c;一般出现任意密码修改&#xff08;没有旧密码验证&#xff09;,越权访问&#xff0c;密码找回&#xff0c;交易支付金额等。对常见的漏洞进行过统计&…

动手学深度学习(Pytorch版)代码实践 -计算机视觉-40目标检测和边界框

40目标检测和边界框 import torch from PIL import Image import matplotlib.pylab as plt from d2l import torch as d2lplt.figure(catdog) img Image.open(../limuPytorch/images/catdog.jpg) plt.imshow(img) plt.show()# 边界框 #save def box_corner_to_center(boxes):…

Android 14 独立编译 Setting apk

我们在setting 目录下是用 mm 会报错。 所以应该在 源码主目录 采用 make Settings 进行编译 很多时候如果在apk 目录下 mm 单独编译会出错&#xff0c; 都可以才用这种方式进行编译。

同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器

同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器 1路SDI进&#xff0c;1路DVI(可转HDMI/VGA/色差分量/AV)3.5音频1路SDI出,可以支持音频解嵌&#xff0c;也可把3.5音频加嵌转换输出&#xff0c;输出分辨率可调&#xff0c;支持图像翻转180度 一、产品简介 SDI转万能转…

音视频入门基础:H.264专题(5)——FFmpeg源码中 解析NALU Header的函数分析

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

运行时库链接方式实践指南(MT、MD、MTd、MDd)

前言 笔者曾经编译一个库提供给使用者&#xff0c;提供库后发现由于运行时库连接方式不一致&#xff0c;导致使用者无法连接笔者提供的库。另一方面&#xff0c;理解和选择正确的运行时链接方式对于构建高效、可靠的应用程序至关重要。 因此&#xff0c;本文将展开运行时库的基…

运算放大器(运放)输入偏置电流、失调电流

输入偏置电流定义 理想情况下&#xff0c;并无电流进入运算放大器的输入端。而实际操作中&#xff0c;始终存在两个输入偏置电流&#xff0c;即IB和IB-(参见图1)。 I B I_B IB​的值大小不一&#xff0c;在静电计AD549中低至60 fA(每三微秒通过一个电子)&#xff0c;而在某些高…