跨越语言的界限:Vue I18n 国际化指南

前言

 📫 大家好,我是南木元元,热爱技术和分享,欢迎大家交流,一起学习进步!

 🍅 个人主页:南木元元


目录

国际化简介

vue-i18n

安装和配置

创建语言包

基本使用

切换语言

动态翻译

结语


国际化简介

国际化是指将软件的用户界面翻译成多种语言的过程,国际化的好处:

  • 拓展市场:使软件能够覆盖更多的用户群体,进入全球市场
  • 用户体验:提供符合用户语言和文化习惯的界面和内容,提升用户体验
  • 维护性:使团队能在不修改核心代码的情况下,添加或更新新的语言支持,降低维护成本

vue-i18n

Vue.js、React.js 和 Angular.js 都有相应的国际化插件和库,Vue I18n 是 Vue.js 的国际化插件,它可以轻松地将一些本地化功能集成到Vue应用程序中。

Vue I18n官网:Vue I18n

安装和配置

在项目根目录下使用npm或yarn安装vue-i18n插件:

npm install vue-i18n

在 main.js 中导入并作为插件使用:

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

创建 VueI18n实例 并配置语言包:

// 创建 VueI18n 实例
const i18n = new VueI18n({locale: 'en', //默认语言messages //引入的语言包
})

将 Vue I18n 实例集成到Vue 实例中:

new Vue({i18n,render: h => h(App)
}).$mount('#app')

创建语言包

messages语言包是一个包含各种语言翻译字符串的对象,由键值对组成,结构如下:

const messages = {en: {message: {hello: 'hello world'}},ja: {message: {hello: 'こんにちは、世界'}}
}

语言包对象会比较大,可以在src下创建一个名为lang的文件夹,并在其中创建对应语言的js文件,如en.js,zh.js等,在文件中定义对应语言的翻译内容。

zh.js示例:

// 创建中文语言包对象
export default {login: {username: "用户名",password: "密码",title: '海贼王',},
};

en.js示例:

// 创建英文语言包对象
export default {login: {username: "username",password: "password",title: "One Piece",},
};

main.js中导入语言包对象:

// 从语言包文件中导入语言包对象
import zh from './zh'
import en from './en'const messages = {zh,en
}

main.js完整代码:

import Vue from 'vue'
import App from './App.vue'
// 导入VueI18n插件
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh'
import en from './en'
// 安装插件
Vue.use(VueI18n)
// 定义语言包
const messages = {zh,en
}
// 创建 VueI18n 实例
const i18n = new VueI18n({locale: 'en', //默认语言messages //引入的语言包
})Vue.config.productionTip = false
// 将插件集成到Vue实例中
new Vue({i18n,render: h => h(App),
}).$mount('#app')

基本使用

在组件中使用国际化内容,可以通过this.$t方法来获取对应语言的翻译内容。在模板中可以使用$t指令直接渲染对应的翻译内容。

<template><div><p>{{ $t('login.title') }}</p><p>{{ $t('login.username') }}</p><p>{{ $t('login.password') }}</p></div>
</template>

示例:

 将locale值设为zh:

const i18n = new VueI18n({messages,locale: 'zh'
})

切换语言

当前切换语言是手动去修改locale的值,这种切换方法当然不行了。我们可以在页面中为用户提供语言切换按钮。

<template><div><button @click="changeLanguage('en')">切换为英文</button><button @click="changeLanguage('zh')">切换为中文</button></div>
</template>

点击时,通过修改locale动态切换语言: 

methods: {changeLanguage(lang) {this.$i18n.locale = lang},
},

动态翻译

有时候我们需要在代码中动态地进行翻译。vue-i18n提供了this.$t方法的第二个参数,可以传入一个对象来替换翻译内容中的占位符。

示例:

<template><div><p>{{ $t('title', {name: 'One Piece'}) }}</p></div>
</template>
{title: "hello, {name}",
}

结语

🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏、✍️评论,支持一下博主~ 

 

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

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

相关文章

大数据Spark 面经

1: Spark 整体架构 Spark 是新一代的大数据处理引擎&#xff0c;支持批处理和流处理&#xff0c;也还支持各种机器学习和图计算&#xff0c;它就是一个Master-worker 架构&#xff0c;所以整个的架构就如下所示&#xff1a; 2: Spark 任务提交命令 一般我们使用shell 命令提…

深入理解TCP协议格式(WireShark分析)

传输控制协议&#xff08;TCP&#xff09;是互联网中最为关键的通信协议之一。了解TCP协议的细节不仅对于网络工程师至关重要&#xff0c;对于任何涉及网络通信的软件开发人员而言都是必备的知识。本文旨在深入探讨TCP协议&#xff0c;从协议的基本概述到其工作机制&#xff0c…

237 删除链表中的节点

题目 有一个单链表的 head&#xff0c;我们想删除它其中的一个节点 node。 给你一个需要删除的节点 node 。你将 无法访问 第一个节点 head。 链表的所有值都是 唯一的&#xff0c;并且保证给定的节点 node 不是链表中的最后一个节点。 删除给定的节点。注意&#xff0c;删…

用户身份和文件权限

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、用户身份与能力 二、文件权限与归属 三、文件的特殊权限 四、文件的隐藏属性 五、文件访问控制列表 六、su命令和sudo服务 致谢 一、…

动手学深度学习(Pytorch版)代码实践 -计算机视觉-48全连接卷积神经网络(FCN)

48全连接卷积神经网络&#xff08;FCN&#xff09; 1.构造函数 import torch import torchvision from torch import nn from torch.nn import functional as F import matplotlib.pyplot as plt import liliPytorch as lp from d2l import torch as d2l# 构造模型 pretrained…

调试支付分回调下载平台证书

之前的原生代码放到webman里面&#xff0c;死活跑不通 没办法&#xff0c;只能用esayWeChat6.7 &#xff08;自行下载&#xff09; 它里面配置要用到平台证书 平台证书又要用到 composer require wechatpay/wechatpay 但是请求接口之前&#xff0c;你先要用到一个临时的平台…

linux下高级IO模型

高级IO 1.高级IO模型基本概念1.1 阻塞IO1.2 非阻塞IO1.3 信号驱动IO1.4 IO多路转接1.5 异步IO 2. 模型代码实现2.1 非阻塞IO2.2 多路转接-selectselect函数介绍什么才叫就绪呢&#xff1f;demoselect特点 2.3 多路转接-pollpoll函数介绍poll优缺点demo 2.4 多路转接-epoll&…

【算法笔记自学】第 5 章 入门篇(3)——数学问题

5.1简单数学 #include <cstdio> #include <algorithm> using namespace std; bool cmp(int a,int b){return a>b; } void to_array(int n,int num[]){for(int i0;i<4;i){num[i]n%10;n /10;} } int to_number(int num[]){int sum0;for(int i0;i<4;i){sumsu…

移动端UI风格营造舒适氛围

移动端UI风格营造舒适氛围

Spring容器Bean之XML配置方式

一、首先看applicationContext.xml里的配置项bean 我们采用xml配置文件的方式对bean进行声明和管理&#xff0c;每一个bean标签都代表着需要被创建的对象并通过property标签可以为该类注入其他依赖对象&#xff0c;通过这种方式Spring容器就可以成功知道我们需要创建那些bean实…

cs224n作业3 代码及运行结果

代码里要求用pytorch1.0.0版本&#xff0c;其实不用也可以的。 【删掉run.py里的assert(torch.version “1.0.0”)即可】 代码里面也有提示让你实现什么&#xff0c;弄懂代码什么意思基本就可以了&#xff0c;看多了感觉大框架都大差不差。多看多练慢慢来&#xff0c;加油&am…

Camunda 整合Springboot 实战篇

1.导入依赖 <dependency><groupId>org.camunda.bpm.springboot</groupId><artifactId>camunda-bpm-spring-boot-starter</artifactId><version>7.18.0</version></dependency><dependency><groupId>org.camunda.b…

C语言图书馆管理系统(管理员版)

案例&#xff1a;图书馆管理系统&#xff08;管理员版&#xff09; 背景&#xff1a; 随着信息技术的发展和普及&#xff0c;传统的图书馆管理方式已经无法满足现代图书馆高效、便捷、智能化的管理需求。传统的手工登记、纸质档案管理不仅耗时耗力&#xff0c;而且容易出现错…

剖析DeFi交易产品之UniswapV3:交易路由合约

本文首发于公众号&#xff1a;Keegan小钢 SwapRouter 合约封装了面向用户的交易接口&#xff0c;但不再像 UniswapV2Router 一样根据不同交易场景拆分为了那么多函数&#xff0c;UniswapV3 的 SwapRouter 核心就只有 4 个交易函数&#xff1a; exactInputSingle&#xff1a;指…

华为机试HJ34图片整理

华为机试HJ34图片整理 题目&#xff1a; 想法&#xff1a; 将输入的字符串中每个字符都转为ASCII码&#xff0c;再通过快速排序进行排序并输出 input_str input() input_list [int(ord(l)) for l in input_str]def partition(arr, low, high):i low - 1pivot arr[high]f…

matlab 有倾斜的椭圆函数图像绘制

matlab 有倾斜的椭圆函数图像绘制 有倾斜的椭圆函数图像绘制xy交叉项引入斜线负向斜线成分正向斜线成分 x^2 y^2 xy 1 &#xff08;负向&#xff09;绘制结果 x^2 y^2 - xy 1 &#xff08;正向&#xff09;绘制结果 有倾斜的椭圆函数图像绘制 为了确定椭圆的长轴和短轴的…

【Python】MacBook M系列芯片Anaconda下载Pytorch,并开发一个简单的数字识别代码(附带踩坑记录)

文章目录 配置镜像源下载Pytorch验证使用Pytorch进行数字识别 配置镜像源 Anaconda下载完毕之后&#xff0c;有两种方式下载pytorch&#xff0c;一种是用页面可视化的方式去下载&#xff0c;另一种方式就是直接用命令行工具去下载。 但是由于默认的Anaconda走的是外网&#x…

9 redis,memcached,nginx网络组件

课程目标: 1.网络模块要处理哪些事情 2.reactor是怎么处理这些事情的 3.reactor怎么封装 4.网络模块与业务逻辑的关系 5.怎么优化reactor? io函数 函数调用 都有两个作用:io检测 是否就绪 io操作 1. int clientfd = accept(listenfd, &addr, &len); 检测 全连接队列…

技术派Spring事件监听机制及原理

Spring事件监听机制是Spring框架中的一种重要技术&#xff0c;允许组件之间进行松耦合通信。通过使用事件监听机制&#xff0c;应用程序的各个组件可以在其他组件不直接引用的情况下&#xff0c;相互发送和接受消息。 需求 在技术派中有这样一个需求&#xff0c;当发布文章或…

简单分享下python多态

目录&#xff1a; 一、多态是啥嘞&#xff08;龙生九子各有不同&#xff0c;这就是多态&#xff09; 二、基础的实例 三、多态的优势与应用场景 四、深入理解 一、多态是啥嘞&#xff08;龙生九子各有不同&#xff0c;这就是多态&#xff09; 多态&#xff08;Polymorphism&…