vue - - - - Vue3+i18n多语言动态国际化设置

Vue3+i18n多语言动态国际化设置

  • 前言
  • 一、 i18n 介绍
  • 二、插件安装
  • 三、i18n配置
    • 3.1 创建i18n对应文件夹/文件
    • 3.2 en-US.js
    • 3.3 zh-CN.js
    • 3.4 index.js
  • 四、 mian.js 引入 i18n配置文件
  • 五、 组件内使用
  • 六、使用效果

前言

继续【如何给自己的网站添加中英文切换】一文之后,后续新开发项目在开发时就要进行多语言环境配置,此文记录Vue3+i18n使用的过程。

一、 i18n 介绍

i18n:Vue.js 的国际化插件。Vue I18n (kazupon.github.io)

它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中

二、插件安装

npm install  vue-i18n@9 --save 
// or 
yarn add  vue-i18n@9 --save

注意:需要注意的是vue3最好使用9.x以上的版本!

三、i18n配置

3.1 创建i18n对应文件夹/文件

在这里插入图片描述

注意:文件名可以随意,但是后续需要对应上!!!

3.2 en-US.js

export default {languageTxt: "简体中文", // 当前语言模式下 可切换的语言模式// 头部信息headTxt: {// 用户相关user: {name: "ZhangSan",btnTxt: "log out",},},// 菜单menuList: [{title: "Home",},{title: "User Management",},{title: "Commodity management",},],
};

3.3 zh-CN.js

export default {
export default {languageTxt: "en-US", // 当前语言模式下 可切换的语言模式// 头部信息headTxt: {// 用户相关user: {name: "张三",btnTxt: "退出",},},// 菜单menuList: [{title: "首 页",},{title: "用户管理",},{title: "商品管理",},],
};

注意:en-US以及 zh-CN两个文件内的数据结构需要保持一致!!!

3.4 index.js

import { createI18n } from "vue-i18n";
import zhCN from "./locales/zh-CN";
import enUS from "./locales/en-US";let language = localStorage.getItem("language") || navigator.language; //  获取本地存储 || 根据浏览器语言设置const i18n = createI18n({legacy: false, // 使用Composition API,这里必须设置为falselocale: language, // 默认显示语言globalInjection: true, // 全局注册$t方法messages: {"zh-CN": zhCN,"en-US": enUS,},
});export default i18n;

四、 mian.js 引入 i18n配置文件

在这里插入图片描述

五、 组件内使用

// namespace: "index" 
<template><div class="index-container">展示locales配置的内容:{{ $t("headTxt.user.name") }}<!-- 切换语言模式按钮 --><button @click="changeLanguage">{{ $t("languageTxt") }}</button></div>
</template>
<script>
// 国际化
import { useI18n } from "vue-i18n";
export default {name: "index",setup() {const I18n = useI18n();let { locale } = I18n;// 可以拿到我们当前设置的默认语言,切换语言更改locale.value的值即可,// 但要跟你language/index.js中message设置的key的值一致!!!// 如果有需要,可以在store中配置一个然后全局使用/*** 切换语言*/const changeLanguage = () => {locale.value = locale.value == "zh-CN" ? "en-US" : "zh-CN"; // 切换中英文};return { locale, changeLanguage };},
};
</script>
<style lang="scss" scoped>
.index-container {
}
</style>

注意:$t为i18n所调用方法,全局引入即可用!

六、使用效果

中文模式下,展示的按钮是英文
在这里插入图片描述

英文模式下,展示的按钮是中文
在这里插入图片描述

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

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

相关文章

pytorch -- CIFAR10 完整的模型训练套路

网络结构 代码 # CIFAR 10完整的模型训练套路&#xff1a; import torch.optim import torchvision from torch import nn from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterfrom model import *# 1. 准备数据集 train_data torch…

产品经理学习-产品运营《社群活跃度打造》

目录&#xff1a; 社群运营普遍问题 社群是否需要活跃 提升活跃的方法 衡量社群的3个标准 社群运营普遍问题 在做社群运营的时候通常会进入一个相似的循环&#xff0c;拉群后会活跃一段时间变成广告群&#xff0c;不断的发商品链接、广告&#xff0c;一段时候后社群变成了一…

数据安全-动态加密(不同敏感字段使用不同的加密算法-MySQL、Oracle版本)

动态数据加密 动态加密&#xff08;也称实时加密&#xff0c;透明加密等&#xff0c;其英文名为encrypt on-the-fly&#xff09;&#xff0c;是指数据在使用过程中自动对数据进行加密或解密操作&#xff0c;无需用户的干预&#xff0c;合法用户在使用加密的文件前&#xff0c;…

LVGL 环境搭建-基于WSL

背景说明 小白刚开始接触LVGL&#xff0c;前些日子狠心花198元入手了一块堪称LVGL 入门利器~HMI-Board 开发板&#xff0c;虽然有RT-Thread 集成好的LVGL 环境&#xff0c;只需要几个步骤就能成功把lvgl 的示例运行起来&#xff0c;对于爱折腾的我来说&#xff0c;过于简单也并…

变大再变大,matplotlib坐标轴刻度设置

文章目录 对数坐标系自定义映射对数图表重置刻度 matplotlib教程&#xff1a;初步&#x1f4c8;子图绘制&#x1f4c8;坐标投影 matplotlib支持重设坐标轴刻度&#xff0c;包括刻度值的重新映射和刻度标签的重新映射。前者可以调整坐标刻度的缩放比例&#xff0c;后者可以更改…

Jmeter系列(2)目录介绍

目录 Jmeter目录介绍bin目录docsextrasliblicensesprintable_docs Jmeter目录介绍 在学习Jmeter之前&#xff0c;需要先对工具的目录有些了解&#xff0c;也会方便后续的学习 bin目录 examplesCSV目录中有CSV样例jmeter.batwindow 启动文件jmeter.shMac/linux的启动文件jmete…

pycharm如何安装pygame库

pycharm如何安装pygame库 PyCharm是Python中广受欢迎的一种IDE&#xff0c;它可以为用户提供许多工具和便利的服务&#xff0c;从而大大提高开发效率。pygame库可以用python进行游戏开发提供很好的支持&#xff0c;那么在ptcharm中如何安装pygame库呢&#xff1f; 一、安装步…

vue项目build 静态文件部署到fastapi后台中访问白屏,访问不到?

正常创建VUE项目那些应该都会&#xff0c;到项目最后 npm run build然后会生成一个dist文件夹 然后把这个文件夹的东西复制去到fastapi项目根目录创建一个static文件夹 然后开始写点代码 # main.py绑定静态文件目录 app.mount("/static", StaticFiles(directory&…

[算法沉淀记录] 排序算法 —— 堆排序

排序算法 —— 堆排序 算法基础介绍 堆排序&#xff08;Heap Sort&#xff09;是一种基于比较的排序算法&#xff0c;它利用堆这种数据结构来实现排序。堆是一种特殊的完全二叉树&#xff0c;其中每个节点的值都必须大于或等于&#xff08;最大堆&#xff09;或小于或等于&am…

goland配置新增文件头

参考&#xff1a; goland函数注释生成插件 goland函数注释生成插件_goland自动加函数说明-CSDN博客 GoLand 快速添加方法注释 GoLand 快速添加方法注释_goland批量注释-CSDN博客 goland 如何设置头注释&#xff0c;自定义author和data goland 如何设置头注释&#xff0c;自定…

【踩坑】修复xrdp无法关闭Authentication Required验证窗口

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 问题如下&#xff0c;时不时出现&#xff0c;有时还怎么都关不掉&#xff0c;很烦&#xff1a; 解决方法一&#xff1a;命令行输入 dbus-send --typemethod_call --destorg.gnome.Shell /org/gnome/Shell org.gn…

【web APIs】1、(学习笔记)有案例!

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、概念二、使用步骤1.获取DOM对象2.操作元素内容3.属性修改3.1.常用属性修改3.2.控制样式属性3.3.操作类名(className) 操作CSS3.4.操作表单元素属性3.5.自定…

Mycat核心教程--ZooKeeper集群搭建【三】

Mycat核心教程--ZooKeeper集群搭建 八、 ZooKeeper集群搭建8.1.ZooKeeper简介8.2.数据复制的好处8.3.Zookeeper设计目的8.4.zookeeper集群包括3种角色8.4.1.Leader角色8.4.2.Follower 角色8.4.3.Observer 角色 8.5.zookeeper集群工作流程8.6.zookeeper集群节点数量为奇数&#…

如何选择适合的工具,将由图片合成的PDF转为Excel?

在数字化时代&#xff0c;PDF文件已经成为我们日常工作中不可或缺的一部分。然而&#xff0c;有时候我们需要将这些PDF文件中的图片转换成Excel格式&#xff0c;以便进行进一步的数据分析和处理。这时&#xff0c;选择一款适合的由图片组成的PDF转Excel工具就显得尤为重要。本文…

mysql order by布尔盲注

什么是order by 在MySQL支持使用ORDER BY语句对查询结果集进行排序处理&#xff0c;使用ORDER BY语句不仅支持对单列数据的排序&#xff0c;还支持对数据表中多列数据的排序。语法格式如下 select * from 表名 order by 列名(或者数字) asc&#xff1b;升序(默认升序) selec…

东莞IBM服务器维修之IBM x3630 M4阵列恢复

记录东莞某抖音电商公司送修一台IBM SYSTEM X3630 M4文档服务器RAID6故障导致数据丢失的恢复案例 时间&#xff1a;2024年02月20日&#xff0c; 服务器品牌&#xff1a;IBM System x3630 M4&#xff0c;阵列卡用的是DELL PERC H730P 服务器用途和用户位置&#xff1a;某抖音电…

深度学习目标检测】二十、基于深度学习的雾天行人车辆检测系统-含数据集、GUI和源码(python,yolov8)

雾天车辆行人检测在多种场景中扮演着至关重要的角色。以下是其作用的几个主要方面&#xff1a; 安全性提升&#xff1a;雾天能见度低&#xff0c;视线受阻&#xff0c;这使得驾驶者和行人在道路上的感知能力大大降低。通过车辆行人检测技术&#xff0c;可以在雾天条件下及时发现…

GEE数据集——全球 30 米不透水表面动态数据集 (GISD30)

全球 30 米不透水表面动态数据集 (GISD30) 全球 30 米不透水表面动态数据集 (GISD30) 为了解 1985 年至 2020 年全球不断变化的不透水表面景观提供了宝贵的资源。该数据集在城市可持续发展、人为碳排放评估和全球生态环境建模等领域具有深远的科学意义和实际应用价值。GISD30 是…

高数考研 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…