Vue3 国际化i18n

news2024/11/23 14:57:16

国际化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'
const messages = {
	en,
	zh,
}
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.coloradmin.cn/o/1861829.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

udp Socket组播 服务器

什么是组播 组播也可以称之为多播这也是 UDP 的特性之一。组播是主机间一对多的通讯模式&#xff0c;是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将一份报文发送到特定的组播地址&#xff0c;组播地址不同于单播地址&#xff0c;它并不属于特定某个主机…

美业门店收银系统Java源码分享私、美业系统中哪种状态订单可以操作退款?

美业门店收银系统是一种专为美容美发、美甲、SPA等美业门店设计的全面性结账解决方案&#xff0c;美业门店收银系统的重要性在于它为门店提供了全面的业务管理解决方案。 美业收银管理系统可以处理销售、预约管理、库存追踪和员工绩效等多项任务&#xff0c;不仅能够简化交易流…

【linux基础awk】如何基于强大的awk打印列、计算

打印列 awk {print $1} test.txt#-F参数去指定分隔的字符 awk -F "," {print $1,$2} file 匹配打印列 awk /a/ {print $4 "\t" $3} test.txt筛选数值 仅打印那些含有多于18个字符的行。awk length($0) > 18 test.txt 统计数目 #统计行数 less num…

2024年电商618观察:这是最好的时代 这是最坏的时代

内容提要 目前阶段增长势头更强劲的是中小商家&#xff0c;而星图的核心数据还是10万多个品牌。 十九世纪&#xff0c;英国最伟大的作家狄更斯在他的小说《双城记》开篇中写道&#xff1a; 这是最好的时代&#xff0c;这是最坏的时代&#xff1b; 这是智慧的年代&#xff0c;…

实用软件下载:ABBYY Finereader 15最新安装包及详细安装教程

数据表明FineReader PDF提供实用、简易的工具&#xff0c;将纸质文档和PDF结合起来&#xff0c;提高了数字工作场所的效率。我们都知道 即时背景识别:使不可搜索的PDF能够在工作中立即使用。值得一提的是文档转换更精准&#xff1a;OCR技术&#xff0c;它提高了PDF转换、布局保…

【linux基础】后台执行命令,防止中断nohup

前台运行与后台运行&#xff1a;前台运行&#xff0c;就是运行过程一直在屏幕输出。 目的&#xff1a;1. 提交至后台 & 2.防止中断 nohup 1.终端上不要有大量的log出现&#xff0c;后台运行 (1) & 程序后台运行 #脚本、修改权限 vi test.sh chmod 777 test.sh#后…

鸿蒙开发系统基础能力:【@ohos.inputMethod (输入法框架)】

输入法框架 说明&#xff1a; 本模块首批接口从API version 6开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import inputMethod from ohos.inputMethod;inputMethod8 常量值。 系统能力&#xff1a;以下各项对应的系统能力均为Sy…

Java网络编程之UDP通信与TCP通信交互代码实现

​import java.net.InetAddress; import java.io.IOException; class Main {public static void main(String[] args) {try { InetAddress localAddress InetAddress.getLocalHost(); //获得本地主机 InetAddress remoteAddress InetAddress.getByName("www.itcast.cn&qu…

【宠粉赠书】SQLServer2022:从入门到精通

为了回馈粉丝们的厚爱&#xff0c;今天小智给大家送上一套数据库学习的必备书籍——《SQL Server 2022从入门到精通》。下面我会详细给大家介绍这套图书&#xff0c;文末留有领取方式。 图书介绍 《SQL Server 2022从入门到精通》系统全面地介绍SQL Server 2022数据库应用与开…

【计算机网络仿真】b站湖科大教书匠思科Packet Tracer——实验3 总线型以太网的特性(广播,竞争总线,冲突)

一、实验目的 1.验证总线型以太网的特性&#xff1b; 2.验证广播特性&#xff1b; 3.验证各主机对总线的竞争使用以及可能产生的碰撞。 二、实验要求 1.使用Cisco Packet Tracer仿真平台&#xff1b; 2.观看B站湖科大教书匠仿真实验视频&#xff0c;完成对应实验。 三、实验内容…

LED显示屏中什么是静态驱动?什么是扫描驱动?两者的区别是什么?

随着科技的飞速发展&#xff0c;LED显示屏作为现代信息显示技术的重要组成部分&#xff0c;正以其独特的优势引领着显示行业的革新。近日&#xff0c;LED显示屏市场呈现出蓬勃的发展态势&#xff0c;技术创新不断推动行业向前发展&#xff0c;让LED显示屏无论是在商场的广告牌、…

<Linux> 缓冲区谁维护?

缓冲区是谁提供的&#xff1f; 来看一段代码 #include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <string.h> int main() {const char *str1 "a";printf("%s", str1);const char *str2 "b";writ…

Younger 数据集:人工智能生成神经网络

设计和优化神经网络架构通常需要广泛的专业知识&#xff0c;从手工设计开始&#xff0c;然后进行手动或自动化的精细化改进。这种依赖性成为快速创新的重要障碍。认识到从头开始自动生成神经网络架构的复杂性&#xff0c;本文引入了Younger&#xff0c;这是一个开创性的数据集&…

使用Birdeye访问Sui上加密市场数据

是一个链上加密交易数据聚合器&#xff0c;于2024年4月开始整合Sui数据。 个人DeFi用户可以在Birdeye的首页找到丰富的数据&#xff0c;包括关于主流区块链上的tokens、交易和交易者钱包的详细信息。 Birdeye提供API和WebSockets数据服务&#xff0c;涵盖token价格和其他DeFi…

类和对象(封装、继承、多态、友元)

c面相对象的三大特性为&#xff1a;封装、集成、多态 c 认为万事万物都皆为对象&#xff0c;对象上有其属性和行为 一、类和对象&#xff08;封装&#xff09; &#xff08;一&#xff09;封装的意义 封装是c面相对象的三大特性之一 封装的意义&#xff1a; 将属性和行为…

HarmonyOS NEXT:华为开启全新操作系统时代

在全球科技浪潮的汹涌澎湃中&#xff0c;华为再次以创新者的姿态&#xff0c;引领了一场关于操作系统的革命。HarmonyOS NEXT&#xff0c;这一由华为倾力打造的分布式操作系统&#xff0c;不仅是对现有技术的一次大胆突破&#xff0c;更是对未来智能生活的一次深邃展望。 Harmo…

AU音频重新混合音频,在 Adobe Audition 中无缝延长背景音乐,无缝缩短BGM

导入音频&#xff0c;选中音频&#xff0c;并且点 New Multitrack Session 的图标 设计文件名和存储路径&#xff0c;然后点 OK 点 Essential Sound 面板点 Music &#xff08;如果没有这个面板 点菜单栏 Windows > Essential Sound 调出来&#xff09; 点 Duration 展…

实战案例:如何用ChatGPT生成适合不同领域的高质量文章

随着人工智能技术的飞速发展&#xff0c;生成高质量文章已经不再是难题。特别是OpenAI开发的ChatGPT&#xff0c;更是为写作工作带来了极大的便利。那么&#xff0c;如何用ChatGPT生成适合不同领域的高质量文章呢&#xff1f;本文将通过实战案例&#xff0c;为大家详细讲解这一…

耐盐雾抗腐蚀航空插头插座

航空插头插座概述 耐盐雾720小时航空插头插座是一种专门设计用于抵抗盐雾侵蚀的航空用连接器&#xff0c;广泛应用于航空航天、海洋工程和其他需要高防护级别的领域。这类插头插座不仅具备一般的电气连接功能&#xff0c;还能在含盐较高的环境中长时间工作而不被腐蚀&#xff…

OpenAI禁止国区使用:免费国产大模型等你体验!

OpenAI中国停服 国产大模型免费使用 前言 OpenAI不支持中国区域访问 从6月25日开始&#xff0c;OpenAI 宣布了对中国停止提供 API 服务&#xff0c;毫无疑问的说这给国内的开发者带来了很大的不便&#xff0c;之后他们怎么去使用GPT 这类先进大模型方面遇到了难题。不过近期我们…