vue3使用i18n实现国际化

  1. 安装vue-i18n
npm install vue-i18n
  1. 创建一个ts文件用于存储各种翻译
    image.png
    globalLang.ts的内容如下:
export default {"cn": {},"en": {},"de": {},"es": {},"fr": {},"id": {},"it": {},"jp": {},"kr": {},"pt": {},"tw": {}
};
  1. 在main.ts中全局引入
import App from "./App.vue"
import { createApp } from "vue"
import { createI18n } from "vue-i18n"
import globalLang from "./lang/globalLang"
const lang = new URLSearchParams(location.search.substr(1)).get("lang") || "zh"
const app = createApp(App)
const i18n = createI18n({legacy: false,locale: lang,fallbakLocale: "en",silentTranslationWarn: true,messages: globalLang,fallbackWarn: false,missingWarn: false
})
app.use(i18n).mount("#app")
  1. 使用方式
  • < template >中可以直接使用, 翻译文件在globalLang中
<template><span>{{ $t("toLogin") }}</span>
</template>
  • < template >中可以直接使用, 翻译再vue中
<template><span>{{ t("toLogin") }}</span>
</template>
<i18n>
{"zh": {“toLogin”: "去登录"},"en": {“toLogin”: "login"}
}
</i18n>
  • 在vue的script文件中
import { useI18n} from 'vue-i18n';
const { t } = useI18n();
const toLogin = () => {console.log(t("toLogin"));
}

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

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

相关文章

【Linux操作系统】进程间通信(1)

目录 一、认识进程间通信二、匿名管道三、命名管道 一、认识进程间通信 进程间不能直接传递数据&#xff0c;因为进程具有独立性&#xff0c;直接传递会破坏进程的独立性。 进程间通信是什么&#xff1f; 一个进程把自己的数据交给另一个进程。 为什么要有进程间通信&#xf…

DAG计算框架:实现业务编排

文章目录 DAG如何实现DAG计算框架Node的实现Engine的实现Graph的实现具体某个节点如何使用 在工作几年之后&#xff0c;大部分人如果还在继续做着 CRUD的简单重复工作&#xff0c;即使领导不提出对你更高的期望&#xff0c;自身也会感到焦虑吧。学如逆水行舟不进则退&#xff…

怎么整合spring security和JWT

什么是spring security spring security是一个安全框架,它里面有过滤器链,可以多次过滤,其实他可以给前端的cookie传入一个jsessionid,都可以不使用jwt也能完成校验 第一步:导入依赖 <!-- springboot security --> <dependency><groupId>org.springframew…

git错误fatal: Unpack error, check server log

git错误fatal: Unpack error, check server log fatal: Unpack error, check server log error: remote unpack failed: error Missing tree xxxxxxxxxxxxxxxxxx 先执行 git fetch 命令&#xff0c;再push。 git拉取远程所有分支/添加远程仓库_git pull所有分支代码-CSDN博客…

OpenGL-ES 学习(8) ---- FBO

目录 FBO OverViewFBO 优点使用FBO的步骤 FBO OverView FBO(FrameBuffer Object) 指的是帧缓冲对象&#xff0c;实际上是一个可以添加缓冲区容器&#xff0c;可以为其添加纹理或者渲染缓冲区对象(RBO) FBO(FrameBuffer Object) 本身不能用于渲染&#xff0c;只有添加了纹理或者…

【C++ Primer Plus习题】3.6

问题: 解答: #include <iostream> using namespace std;int main() {float miles 0;float gallons 0;float gallon 0;cout << "请输入驱车里程(单位为英里):";cin >> miles;cout << "请输入使用的汽油量(单位为加仑):";cin &g…

【Three.js基础学习】19.Custom models with Blender

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 blender模型资源:【blender】一个汉堡包-CSDN博客 一、代码 import ./style.css import * as THREE from three import { OrbitControls } from three/examples/jsm/co…

CentOS服务器三级等保加固

1.密码周期: vim /etc/login.defs max_days:90 mindays:2 minlen:8 warnage:72.密码复杂度: vim /etc/pam.d/system-auth &#xff1a; password requisite pam_cracklib.so retry3 difok3 minlen8 lcredit-1 dcredit-1 ucredit-1 ocredit-1 【Ubuntu系统->vim /etc/pam.d/c…

【STM32】C语言基础补充

学习过程中发现自己好些需要用到的C语言语法、特征都不太熟练了&#xff0c;特意记录一下&#xff0c;免得忘记了&#xff0c;以后遇到了新的也会继续更新 目录 1 全局变量 2 结构体 3 静态变量 4 memset()函数 5 使用8位的存储器存16位的数 1 全局变量…

C++学习笔记----4、用C++进行程序设计(四)---- 复合关系与继承关系之间的细线

在现实世界只是很容易区分对象之间是复合关系还是继承关系。没有人会说桔子有一个水果--而只能是桔子是一种水果。但是&#xff0c;在代码中&#xff0c;有时候就不是那么清晰了。 设想有一个代表关联数组的假想类&#xff0c;将一个键影射到一个值的数据结构。例如&#xff0c…

【Canvas与艺术】环形橄榄枝纹饰

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>环形橄榄枝(draft2)</title><style type"text/css&quo…

MySql 高阶二(SQL 性能分析)

SQL 性能分析&#xff1a; 查看当前数据库的 增删改查的使用情况 show global status like Com_______;慢查询日志&#xff1a; -- 查看状态 show variables like slow_query_log目前是开启状态。如何开启&#xff0c;编辑my.cnf 文件 添加下面的语句&#xff0c;编辑完成后…

Ansible远程自动化运维

目录 概念 安装ansible modules模块和语法 命令行语法 模块 1. command 基础模块 常用的参数 2. shell模块 3. cron定时任务模块 4. user用户管理模块 参数 5. copy复制模块 参数 6. file模块 设置文件属性 参数 实验&#xff1a;批量创建目录 7…

设备实时数据采集:开启制造业智能化、自动化的新篇章

传统制造业在进行生产过程中&#xff0c;会涉及到设备实时数据采集需求&#xff0c;这些数据对于监控生产流程、优化生产效率、保证产品质量以及降低成本等方面至关重要。以下是一些常见的数据采集需求&#xff1a; 1.生产数据&#xff1a;包括生产数量、生产批次、生产速度等&…

如何禁止编辑PDF文件?推荐两种方法!

在日常工作中&#xff0c;我们经常会遇到需要分享重要的PDF文件的情况&#xff0c;但又希望文件内容不被随意更改。为此&#xff0c;设置PDF文件的修改限制是一个非常有效的措施。今天分享两种常见的禁止修改PDF的方法&#xff0c;一起来看看如何设置。 方法一&#xff1a;使用…

FPGA开发——DS18B20读取温度并且在数码管上显示

一、简介 在上一篇文章中我们对于DS18B20的相关理论进行了详细的解释&#xff0c;同时也对怎样使用DS18B20进行了一个简单的叙述。在这篇文章我们通过工程来实现DS18B20的温度读取并且实现在数码管伤显示。 1、基本实现思路 根据不同时刻的操作&#xff0c;我们可以使用一个状…

TCP与UDP传输的学习

void *memset(void *s, int c, size_t n); 功能&#xff1a;将一块内存空间的每个字节都设置为指定的值&#xff1b;这个函数通常用于初始化一个内存空间&#xff0c;或者清空一个空间&#xff1b; 参数&#xff1a;viod * s 空类型指针&#xff0c;指向要填充内存块&#xf…

代码随想录训练营 Day37打卡 动态规划 part05 完全背包理论基础 518. 零钱兑换II 377. 组合总和 Ⅳ 卡码70. 爬楼梯(进阶版)

代码随想录训练营 Day37打卡 动态规划 part05 一、完全背包理论基础 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09;&#xff0c;求解将哪些物品装…

Arco Design,字节跳动出品的UI库

Arco Design是字节跳动出品的UI库&#xff0c;支持Vue和React。还是比较美观的。并且Arco Design还提供了中后台模版。但是通过提供的arco-cli连接了github&#xff0c;正常情况下无法构建。但效果还是挺好的&#xff0c;下面是效果图&#xff1a; 更新&#xff1a; 传送门可…

【C++ Primer Plus习题】2.3

问题: 解答: #include <iostream> using namespace std;void print01() {cout << "三只眼瞎的老鼠" << endl; }void print02() {cout << "看他们怎么跑" << endl; }int main() {print01();print01();print02();print02();r…