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://www.mzph.cn/news/705071.shtml

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

相关文章

41.仿简道云公式函数实战-数学函数-SUMIF

1. SUMIF函数 SUMIF 函数可用于计算子表单中满足某一条件的数字相加并返回和。 2. 函数用法 SUMIF(range, criteria, [sum_range]) 其中各参数的含义及使用方法如下&#xff1a; range&#xff1a;必需&#xff1b;根据 criteria 的条件规则进行检测的判断字段。支持的字段…

点云从入门到精通技术详解100篇-基于背包激光雷达点云在城市公园单木参数提取中的应用(续)

目录 3 地面滤波及单木分割 3.1 地面滤波(Ground Filtering) 3.2 单木分割(Single-Tree Segmentation)

C++面试 -操作系统-架构能力:内存问题分析与性能优化

内存问题分析&#xff1a; 内存泄漏&#xff1a; 描述什么是内存泄漏&#xff0c;以及它如何在 C 中发生。使用工具&#xff08;如 Valgrind、AddressSanitizer&#xff09;来检测和定位内存泄漏。如何预防内存泄漏&#xff1f;使用智能指针、正确释放资源等。 野指针和悬挂指针…

【Leetcode每日一题】二分查找 - 在排序数组中查找元素的第一个和最后一个位置(难度⭐⭐)(18)

1. 题目解析 Leetcode链接&#xff1a;34. 在排序数组中查找元素的第一个和最后一个位置 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于找到给定目标值所在的数组下标区间&#xff0c;设计一个O(logn)的算法。 2. 算法原…

描述C++中的移动语义和完美转发

在C中&#xff0c;移动语义和完美转发是两个高级特性&#xff0c;它们在提高程序性能和资源管理效率方面起着至关重要的作用。这两个特性从C11开始引入&#xff0c;旨在解决传统的拷贝操作可能带来的性能问题&#xff0c;以及在函数模板中如何有效地转发参数的问题。 移动语义…

基于“python+”潮汐、风驱动循环、风暴潮等海洋水动力模拟

原文&#xff1a;基于“python”潮汐、风驱动循环、风暴潮等海洋水动力模拟 前沿 ADCIRC是新一代海洋水动力计算模型&#xff0c;它采用了非结构三角形网格广义波动连续方程的设计&#xff0c;在提高计算精确度的同时还减小了计算时间。被广泛应用于&#xff1a;模拟潮汐和风驱…

Linux系统中毒,应急方法

1、检查用户及密码文件/etc/passwd、/etc/shadow 是否存在多余帐号&#xff0c;主要看一下帐号 后面是否是 nologin,如果没有 nologin 就要注意&#xff1b; 2、通过 who 命令查看当前登录用户&#xff08;tty 本地登陆 pts 远程登录&#xff09;、w 命令查看系统信息&#x…

C/C++文本统计分析

#include <iostream> #include <fstream> using namespace std; int GetTxtLine(const char *filename); /* run this program using the console pauser or add your own getch, system("pause") or input loop */ char c[10];//使用文件流从txt文本中读…

2024牛客寒假算法基础集训营2

目录 A.Tokitsukaze and Bracelet B.Tokitsukaze and Cats C.Tokitsukaze and Min-Max XOR D.Tokitsukaze and Slash Draw E and F.Tokitsukaze and Eliminate (easy)(hard) G.Tokitsukaze and Power Battle (easy) 暂无 I.Tokitsukaze and Short Path (plus) J.Tokits…

Qt QWidget 简约美观的加载动画 第五季 - 小方块风格

给大家分享两个小方块风格的加载动画 &#x1f60a; 第五季来啦 &#x1f60a; 效果如下: 一个三个文件,可以直接编译运行 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QGridLayout> int main(int argc, char *arg…

CSS 入门手册(二)

目录 12-Overflow 13-下拉菜单 14-提示框 14.1 显示位置&#xff08;左右&#xff09; 14.2 显示位置(上下) 14.3 添加箭头 14.4 淡入效果 15-图片 16-列表 17-表格 17.1 表格宽度和高度 17.2 文字对齐 17.3 表格颜色 18-计数器 19-导航栏 19.1 导航栏UI优化 …

python第七节:条件、循环语句(2)

循环语句 while循环 for循环 组合嵌套循环 break 终止循环&#xff0c;跳出整个循环 continue 终止当前循环&#xff0c;进入下一次循环 pass 空语句&#xff0c;什么都不做&#xff0c;用于保持结构完整 语法1&#xff1a;whlie循环一定要控制好循环条件&#…

Python基础21 面向对象(4)进阶 类的一些内置方法和属性

文章目录 一、模块调用中attr类函数的运用1、执行模块以外的模块调用2、执行模块调用自己 二、\_\_getattribute__()方法的运行逻辑三、item系列方法四、\_\_str__()方法五、\_\_repr__()方法六、自定制格式化方法七、__slots__属性八、\_\_doc__属性九、__module__和__class\_…

pytorch -- torch.nn下的常用损失函数

1.基础 loss function损失函数&#xff1a;预测输出与实际输出 差距 越小越好 - 计算实际输出和目标之间的差距 - 为我们更新输出提供依据&#xff08;反向传播&#xff09; 1. L1 torch.nn.L1Loss(size_averageNone, reduceNone, reduction‘mean’) 2. 平方差&#xff08;…

axios的基本特性用法

1. axios的基本特性 axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。 它具有以下特征&#xff1a; 支持浏览器和node.js支持promiseAPI自动转换JSON数据能拦截请求和响应请求转换请求数据和响应数据&#xff08;请求是可以加密&#xff0c;在返回时也可进行解密&…

如何在 VM 虚拟机中安装 Windows 7 操作系统保姆级教程(附链接)

一、VMware Workstation 虚拟机 没有安装 VM 虚拟机的参考以下文章进行安装&#xff1a; VM 虚拟机安装教程​编辑https://eclecticism.blog.csdn.net/article/details/135713915https://eclecticism.blog.csdn.net/article/details/135713915 二、Windows 7 镜像 点击链接…

大语言模型LLM参数微调:提升6B及以上级别模型性能(LLM系列009)

文章目录 大语言模型LLM参数微调&#xff1a;提升6B及以上级别模型性能&#xff08;LLM系列009&#xff09;序章LLM参数微调的核心原理预训练与微调过程技术细化 LLM参数微调实战案例详解案例一&#xff1a;文本分类任务微调案例二&#xff1a;问答系统任务微调案例三&#xff…

C++:类与对象(2)

创作不易&#xff0c;感谢三连&#xff01; 一、六大默认成员函数 C为了弥补C语言的不足&#xff0c;设置了6个默认成员函数 二、构造函数 2.1 概念 在我们学习数据结构的时候&#xff0c;我们总是要在使用一个对象前进行初始化&#xff0c;这似乎已经成为了一件无法改变的…

cypher操作图数据库

简单示例 sql语法返回值 sql语法 在Match语法中&#xff0c;无法对关系使用$引入变量&#xff08;案例中的max_path_len&#xff09;。如果一定要引入&#xff0c;就使用format的字符串占位符方法。在Match语法中&#xff0c;允许对节点的属性使用$引入变量。如果sql已经使用了…

【论文笔记之 YIN】YIN, a fundamental frequency estimator for speech and music

本文对 Alain de Cheveigne 等人于 2002 年在 The Journal of the Acoustical Society of America 上发表的论文进行简单地翻译。如有表述不当之处欢迎批评指正。欢迎任何形式的转载&#xff0c;但请务必注明出处。 论文链接&#xff1a;http://audition.ens.fr/adc/pdf/2002_…