当前位置: 首页 > news >正文

vue国际化

前言

现在的大公司都走国际化路线,我们应用程序也不例外。今天就在 Vue3 项目中整一个比较简单的国际化

背景

之前搞国际化的时候,也搜索了很多帖子,但是没有一个可以完整的实现。今天有空搞了一版,大家有什么问题欢迎留言探讨

项目框架

vite + vue3 + elementPlus + vue-i18n + vue-cookie

一、准备工作

首先需要安装两个三方件
1、国际化三方件:vue-i18n
npm install vue-i18n
2、cookie 三方件:vue-cookie
npm install vue-cookie

二、国际化

1、在项目中创建一个 local 目录,再在 local 目录下面创建一个 lang 目录 和 index.ts 文件
在这里插入图片描述
2、 index.ts 文件

import { createI18n } from "vue-i18n"
import enLang from "./lang/en"
import zhLang from "./lang/zh"
import VueCookie from "vue-cookie"//从 cookie 中获取语言,如果没有则默认为 中文
const defaultLang = VueCookie.get("local") || "zh"const i18n = createI18n({locale: defaultLang, //默认语言fallbackLocale: "zh",messages: {en: enLang,zh: zhLang} //设置语言内容
})export default i18n

3、main.ts 文件

import i18n from './router/local/index'
app.use(i18n)

4、zh.ts 文件

export default {system: {lang: "中文"},table: {name: "王小龙",address: "上海市普陀区金沙江路 1517 弄"}
}

5、en.ts 文件

export default {system: {lang: "en"},table: {name: "Wang Xiaolong",address: "Lane 1517, Jinshajiang Road, Putuo District, Shanghai"}
}

6、home.vue 文件

<!-- home.vue -->
<template><el-button @click="changeLanguage">{{ $t("system.lang") }}</el-button><el-table:data="tableData"row-key="id"><el-table-column type="selection" :reserve-selection="true" width="55" /><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="地址" /></el-table>
</template>
<script setup lang="ts">
import { ref } from "vue";
import VueCookie from "vue-cookie"
import { useI18n } from "vue-i18n"//国际化
const { t } = useI18n()//当前语言
let isZH = ref(VueCookie.get("local") != "en");/*** 切换语言*/
const changeLanguage = () => {VueCookie.set( "local", isZH.value ? "en" : "zh");//对页面进行重新挂载location.reload()
}const tableData = ref([{id: 1,date: "2016-05-02",name: t("table.name"),address: t("table.address"),},// ...更多数据{id: 2,date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: 3,date: "2016-05-02",name: "王小保",address: "上海市普陀区金沙江路 1519 弄",},
]);
</script>

相关文章:

vue国际化

前言 现在的大公司都走国际化路线&#xff0c;我们应用程序也不例外。今天就在 Vue3 项目中整一个比较简单的国际化 背景 之前搞国际化的时候&#xff0c;也搜索了很多帖子&#xff0c;但是没有一个可以完整的实现。今天有空搞了一版&#xff0c;大家有什么问题欢迎留言探讨…...

解决tiktoken库调用get_encoding时SSL超时

文章目录 解决tiktoken库调用get_encoding时SSL超时1. 获取词表文件url2. 手动下载词表文件并保存到本地3. 复制并重命名文件4. 环境变量中设置tiktoken cache5. 使用tiktoken库参考资料 解决tiktoken库调用get_encoding时SSL超时 最近在看Build a Large Language Model (From…...

C++从入门到起飞之——继承上篇 全方位剖析!

&#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1、继承的概念 2、继承定义 2.1 定义格式 2.2 继承基类成员访问⽅式的变化 3、继承类模板 4、 基…...

【文件包含】——日志文件注入

改变的确很难&#xff0c;但结果值得冒险 本文主要根据做题内容的总结&#xff0c;如有错误之处&#xff0c;还请各位师傅指正 一.伪协议的失效 当我们做到关于文件包含的题目时&#xff0c;常用思路其实就是使用伪协议&#xff08;php:filter,data,inpput等等&#xff09;执行…...

UE5源码Windows编译、运行

官方文档 Welcome To Unreal Engine 5 Early Access Learn what to expect from the UE5 Early Access program. 链接如下&#xff1a;https://docs.unrealengine.com/5.0/en-US/Welcome/#gettingue5earlyaccessfromgithub Step 0&#xff1a;找到UE5源码 直接先上链接 https…...

AI大模型与产品经理:替代与合作的深度剖析

在创业的征途中&#xff0c;产品经理常常被外界以一种半开玩笑的口吻提及&#xff1a;“就差一个程序员了。”这句话背后&#xff0c;既蕴含着对产品经理创意与策略能力的认可&#xff0c;也揭示了技术实现环节对于产品成功不可或缺的重要性。然而&#xff0c;随着AI技术的飞速…...

资本的运作方式、贷款的评估标准、杠杆率

在资本领域&#xff0c;涉及到多个角色和复杂的运作机制。以下是一些主要的角色及其运作方式&#xff1a; 主要角色 政府&#xff1a; 发行债券&#xff1a;政府通过发行国债和其他债券来筹集资金&#xff0c;用于公共支出和基础设施建设。货币政策&#xff1a;政府通过调节利…...

Python:抓取 Bilibili(B站)评论、弹幕、字幕等

个人学习需求&#xff0c;需要获取一些 UGC&#xff08;user generated content&#xff09;&#xff0c;包括 UP 的内容、弹幕、评论等。于是从 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 抓取了一些数据&#xff0c;以下内容仅供学习参考。 目录 1. Python 包&#xff1a;bilib…...

Ubuntu系统Docker部署数据库管理工具DbGate并实现远程查询数据

文章目录 前言1. 安装Docker2. 使用Docker拉取DbGate镜像3. 创建并启动DbGate容器4. 本地连接测试5. 公网远程访问本地DbGate容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 前言 本文主要介绍如何在Linux Ubuntu系统中使用Docker部署DbGate数…...

18063 圈中的游戏

### 思路 1. 创建一个循环链表表示围成一圈的 n 个人。 2. 从第一个人开始报数&#xff0c;每报到 3 的人退出圈子。 3. 重复上述过程&#xff0c;直到只剩下一个人。 4. 输出最后留下的人的编号。 ### 伪代码 1. 创建一个循环链表&#xff0c;节点表示每个人的编号。 2. 初始…...

【Spring Boot】SpringBoot自动装配-Import

目录 一、前言二、 定义三、使用说明3.1 创建项目3.1.1 导入依赖3.1.2 创建User类 3.2 测试导入Bean3.2.1 修改启动类 3.3 测试导入配置类3.3.1 创建UserConfig类3.3.2 修改启动类 3.4 测试导入ImportSelector3.4.1 创建UseImportSelector类3.4.2 修改启动类3.4.3 启动测试 3.5…...

C++:opencv计算轮廓周长--cv::arcLength

cv::arcLength 是 OpenCV 中用于计算轮廓的周长或曲线长度的函数。它是计算图像轮廓特征时非常有用的工具&#xff0c;特别是在处理形状分析、对象检测等任务时。 函数原型 double cv::arcLength(const cv::InputArray& curve, bool closed);curve: 输入的曲线或轮廓&…...

探索学习Python的最佳开发环境和编辑器

Python&#xff0c;作为目前最受欢迎的编程语言之一&#xff0c;因其简洁明了的语法和强大的功能性而备受开发者喜爱。无论是数据科学、机器学习、Web开发还是自动化脚本&#xff0c;Python都有着广泛的应用。选择合适的开发环境和编辑器对于提高编程效率和学习体验至关重要。 …...

【Pycharm】Pycharm创建Django提示pip版本需要升级

目录 1、现象 2、分析 3、本质 前言&#xff1a;经常使用pycharm创建django、flask等项目时候提示pip版本需要升级&#xff0c;解决方案 1、现象 使用Pycharm创建Django项目提示安装Django超时&#xff0c;报错建议pip升级22升级到24 2、分析 之前使用命令升级了pip到了24…...

模拟退火算法(SA算法)求解实例---旅行商问题 (TSP)

目录 一、采用SA求解 TSP二、 旅行商问题2.1 实际例子&#xff1a;求解 6 个城市的 TSP2.2 **求解该问题的代码**2.3 代码运行过程截屏2.4 代码运行结果截屏&#xff08;后续和其他算法进行对比&#xff09; 三、 如何修改代码&#xff1f;3.1 减少城市坐标&#xff0c;如下&am…...

衡石分析平台使用手册--替换衡石 metadb

替换衡石 metadb​ 在使用 HENGSHI SENSE 服务过程中&#xff0c;可以根据业务需要替换 HENGSHI 自带的 metadb。本文讲述使用云服务 PostgreSQL 替代衡石 metadb 的过程。 准备工作​ 在进行配置前&#xff0c;请在云服务 PostgreSQL 上完成如下准备工作。 [必须] 配置衡石…...

【Unity学习心得】如何制作俯视角射击游戏

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、导入素材二、制作流程 1.制作地图2.实现人物动画和移动脚本3.制作单例模式和对象池4.制作手枪pistol和子弹bullet和子弹壳bulletShell5.制作散弹枪shotgun总…...

【资料分析】常见的坑

in 比较或计数类问题 差别大的基期比较&#xff0c;可以直接用现期进行比较 注意单位可能不同&#xff01; 注意顺序是从小到大还是从大到小 以及老问题&#xff0c;名字本身就叫XX增量&#xff0c;XX增加值&#xff0c;而非还要另外去算的东东 给出的图表可能是不完整的 2…...

GitLab权限及设置

之前很少关注这些&#xff0c;项目的权限&#xff0c;一般由专门的管理人员设置。 但自己创建的项目自己可以设置权限。下面是一些笔记。 GitLab中用户权限_gitlab 权限-CSDN博客 开发中遇到要将自己这块的代码上传到Git&#xff0c;由其他组的同事拉取后继续开发。上传代码后…...

算法练习题24——查找杨辉三角中的组合数

题目描述 杨辉三角中的每个元素是一个组合数。第 ( i ) 行的第 ( j ) 个元素表示组合数 ( C(i, j) ) &#xff0c;即从 ( i ) 个元素中选 ( j ) 个元素的组合方式。已知一个正整数 ( N )&#xff0c;要求在杨辉三角中找到这个数&#xff0c;并输出它在杨辉三角中的具体位置。位…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...