uniapp(vue2)+VoerkaI18n多语言

今天我学习了VoerkaI18n国际化插件,它是一个适用于Javascript/Vue/React/Solid/ReactNative的国际化全流程解决方案。VoerkaI18n可以帮助我们轻松地实现应用程序的多语言支持,使得应用程序可以适应不同的语言环境。
比较吸引我的是集成自动翻译,t(“中华人民共和国万岁”)这种中文优先写法,而不是t(“hello”)这种
官方文档

  1. VoerkaI18n安装:
npm install --g @voerkai18n/cli
  1. 项目根目录安装vue2的插件
npm install @voerkai18n/vue2
  1. 根目录新增目录src,执行命令
voerkai18n init
  1. 移动src下生成的languages文件夹到根目录,删除src
  2. 提取要翻译的文本
voerkai18n extract
  1. 编译语言包
voerkai18n compile

最后在 main.js 文件中引入了VoerkaI18n,并进行了相应的配置:

import { t, i18nScope } from "./languages"
import { i18nPlugin, i18nMixin } from "@voerkai18n/vue2"
Vue.prototype.$t = t
Vue.use(i18nPlugin, { i18nScope })
Vue.mixin(i18nMixin(i18nScope))
  • 切换语言
    this.changeLanguage(‘en’) // 或者在模板里changeLanguage(‘en’)

通过以上配置,我成功地集成了VoerkaI18n到我的Vue.js应用程序中,为应用程序添加了国际化的支持。我很高兴能够学习并应用这样一个强大的工具,它将为我的应用程序带来更好的用户体验。

主要是做一个记录,避免下次引入时忘记.这样的流程或许和文档有些许差异.但是最终成功实现了引入并一键切换语言的功能.

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

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

相关文章

基于net6的asp.net core webapi项目打包为docker镜像,并推送至私有镜像仓库harbor中

基于net6的asp.net core webapi项目打包为docker镜像,并推送至私有镜像仓库harbor中 0、环境说明1、打包步骤1.1 创建Asp.net core WebApi项目1.2 在Asp.net core WebApi项目根目录下创建Dockerfile文件1.3 在子系统Ubuntu20.04.4中通过docker build生成docker镜像1…

【angular教程240105】02绑定属性 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道

【angular】02绑定属性 绑定数据、条件判断、加载图片、【ngClass】 【ngStyle】、Angular管道 0 一些基础的概念 标记为可注入的服务 在Angular中,一个服务是一个通常提供特定功能的类,比如获取数据、日志记录或者业务逻辑等。标记为可注入的服务意味着…

PTA——查验身份证

一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1&am…

判断一个数是NaN和Infinity的方法

1. isNaN()、 Number.isNaN()的区别 isNaN()只要不是数字都会返回true, Number.isNaN()只有NaN才 返回 true 所以,想严格检查一个值是否是 NaN,就选择 Number.isNaN() isNaN() isNaN() 函数会尝试将传入的值转换为数字,然后检查…

PCL 计算异面直线的距离

目录 一、算法原理二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,PCL 计算异面直线的距离,爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 设置直线 A B AB A

在vue3上挂载方法,以及在页面中使用setup语法糖 该怎么使用原型(公共)上的方法

//新建的项目的main.js文件是这样的 //main.js 文件 //befor import { createApp } from vue; import App from ./App.vue;const app createApp(App); app.mount(#app);以下例子用于解释在vue3.0的main.js中挂载公共的方法(foo) //main.js 文件 //afte…

【JVM 基础】 Java 类加载机制

JVM 基础 - Java 类加载机制 类的生命周期类的加载: 查找并加载类的二进制数据连接验证: 确保被加载的类的正确性准备: 为类的静态变量分配内存,并将其初始化为默认值解析: 把类中的符号引用转换为直接引用 初始化使用卸载 类加载器, JVM类加载机制类加载…

nuxt 不解析HTML结构bug

记录一个本人Vue3迁移Nuxt3的报错 报错信息 [Vue warn]: Failed to resolve directive: top [nitro] [unhandledRejection] TypeError: Cannot read properties of undefined (reading ‘getSSRProps’) 原因是Vue3在迁移到nuxt3的时候有一个自定义指令没有搬过来&#xff0…

flutter 打包安卓apk 常用配置

打包之前需要先不配置不然会报错 Execution failed for task ‘:app:mergeReleaseResources’. APP目录下的build.gradleaaptOptions.cruncherEnabled falseaaptOptions.useNewCruncher false如图 配置targetSdkVersion 、minSdkVersion 在android/app/src目录下的build.…

自承载 Self-Host ASP.NET Web API 1 (C#)

本教程介绍如何在控制台应用程序中托管 Web API。 ASP.NET Web API不需要 IIS。 可以在自己的主机进程中自托管 Web API。 创建控制台应用程序项目 启动 Visual Studio,然后从“开始”页中选择“新建项目”。 或者,从“ 文件 ”菜单中选择“ 新建 ”&a…

【小工具】pixi-live2d-display,直接可用的live2d的交互网页/桌面应用

效果&#xff1a; <script src"https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script> <script src"https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script> <…

CCSC,一种CPU架构

core-circuit-separate-computer 核与执行电路的分离&#xff0c;最初是为了省电。 用寄存器实现这种分离。 V寄存器控制着执行电路的供电&#xff0c;V0则不供电&#xff0c;进入省电模式&#xff1b;V1则供电&#xff0c;进入工作模式。 P寄存器是parameter-register&#xf…

4.【TypeScript 教程】TypeScript BigInt

TypeScript BigInt 本节介绍的 bigint 数据类型是用来表示那些已经超出了 number 类型最大值的整数值&#xff0c;对于总是被诟病的整数溢出问题&#xff0c;使用了 bigint 后将完美解决。 1. 解释 bigint 是一种基本数据类型&#xff08;primitive data type&#xff09;。 …

算法练习:查找二维数组中的目标值

题目&#xff1a; 编写一个高效的算法来搜索矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a;每行的元素从左到右升序排列。每列的元素从上到下升序排列。 实现&#xff1a; 1. main方法 public static void main(String[] args) {int[][] matrix {{1…

考研自命题资料、考题如何找

这篇文章是抖音和b站上上传的同名视频的原文稿件&#xff0c;感兴趣的csdn用户可以关注我的抖音和b站账号&#xff08;GeekPower极客力量&#xff09;。同时这篇文章也为视频观众提供方便&#xff0c;可以更加冷静地分析和思考。文章同时在知乎发表。 去年我发布了一个视频&am…

qt打包完整详细过程 包你成功

找问题找了一个多小时&#xff0c;不停调试&#xff0c;还修改文件路径&#xff0c;配置路径&#xff0c;开机关机&#xff0c;最后终于做出来了&#xff0c;得出来了一个结论 我绝对是天才 首先 看这个视频 k14 打包发布_哔哩哔哩_bilibili 不出意外&#xff0c;你绝对会在…

2024.01.09.Apple_UI_BUG

我是软件行业的&#xff0c;虽然不是手机设计的&#xff0c;但是这个设计真的导致经常看信息不完整&#xff0c;要下拉的。 特别读取文本或者其他文件的时候&#xff0c;上面有个抬头就是看不到&#xff0c;烦&#xff0c;体验感很差

linux--香橙派下--自动挂载u盘

参考&#xff1a; [(182 条消息 ) Linux 基础 ] -- udev 和 rules 使用规则 BestW2Y 的博客 -CSDN 博客 linux rules (182 条消息 ) Ubuntu udev rules_zhang6318 的博客 -CSDN 博客 规则文件是 udev 里最重要的部分&#xff0c;默认是存放在 /etc/udev/rule.d/ 下。所…

一氧化碳中毒悲剧频发:探究道合顺电化学传感器促进家庭取暖安全

1月6日&#xff0c;陕西省榆林市发生了一起疑似因使用煤炭炉取暖中毒事件。通报称&#xff0c;经公安部门现场调查&#xff0c;并结合医院救治情况&#xff0c;初步判断5人属一氧化碳中毒&#xff0c;其中4人抢救无效死亡&#xff0c;令人痛心。 一般来说&#xff0c;这种在日…

74应急响应-winlinux分析后门勒索病毒攻击

#操作系统(windows,linux)应急响应&#xff1a; 1.常见危害&#xff1a;暴力破解&#xff0c;漏洞利用&#xff0c;流量攻击&#xff0c;木马控制(Webshell,PC 木马等)&#xff0c;病毒感染(挖矿&#xff0c;蠕虫&#xff0c;勒索等)。 2.常见分析&#xff1a;计算机账户&…