【i18n】使用 vue-i18n 实现国际化多语言切换

news2024/11/29 14:51:25

学习关键语句:
i18n 进行多语言国际化
使用 vue-i18n 语言切换

写在前面

由于以前没有过国际化的经验 , 所以第一次遇到的时候还是有点懵逼的 , 赶紧在网上转了一大圈 , 分享给大家一点点我的使用经验

我写这篇文章的目的是大家看了之后跟着步骤走就能完成多语言切换的任务

提示 : 本文演示的内容基于 使用 vite 创建的 vue3 项目

开始

安装与配置

  1. 使用 npm 或者 yarn 命令进行安装
npm install vue-i18n

yarn add vue-i18n

本文所使用的 vue-i18n 版本号为 ^9.2.2
在网上搜了搜 , 一般认为版本大于 9 就可以使用了 , 我没尝试过低版本的 , 麻烦

  1. 配置语言文件

在 src 目录下新增一个 langs 文件夹 , 名字你可以自己取 , 暂时只考虑中英文语言切换 , 新建三个文件 , 分别是

主文件 index.js
中文文件 zh.js
英文文件 en.js
< 图中使用了 ts 但是无妨一会儿会去掉 >

在这里插入图片描述

index.js

import { createI18n } from 'vue-i18n'		//引入vue-i18n组件
// 引入同级目录下所有文件 , 我们的目的是引入中文文件 zh.js 和英文文件 en.js
const modules = import.meta.globEager('./*')

// 获取所有语言的详细内容
function getLangAll() {
    let message = {}
    getLangFiles(modules, message)
    return message
}

// 遍历获取每个文件中语言的详细内容
function getLangFiles(mList, msg) {
    for (let path in mList) {
        if (mList[path].default) {
            //  获取文件名
            let pathName = path.substr(path.lastIndexOf('/') + 1, 5)
            if (msg[pathName]) {
                msg[pathName] = {
                    ...mList[pathName],
                    ...mList[path].default
                }
            } else {
                msg[pathName] = mList[path].default
            }
        }
    }
}
// 注册i8n实例并引入语言文件
const i18n = createI18n({
    legacy: false,
    locale: 'zh.js',
    messages: getLangAll()
})

export default i18n // 将i18n暴露出去，在main.js中引入挂载

主要配置文件就是上面的 index.js 了 , 接下来我们随便写一点语言切换相关的内容

zh.js

export default {
    common: {
        name: '邵雅虎',
        status: '状态',
        operate: '操作',
        change: '修改',
        delete: '删除'
    }
}

en.js

export default {
    common: {
        name: 'shaoyahu',
        status: 'Status',
        operate: 'Operate',
        change: 'Change',
        delete: 'Delete'
    }
}

接下来需要在 main.js 中进行引用和挂载

// main.js
// 主要内容就是和 i18n 有关的引用和 use 
// 你只需要见缝插针 , 找到你的项目文件 main.js 中没有的复制进去
import { createApp } from 'vue'
import VueI18n from '@/langs'
const app = createApp(App)
app.use(VueI18n)
app.mount('#app')

好 , 目前配置相关的工作我们已经完成了 , 接下来让我们来使用多语言化

国际化改造

不得不说的是 , 国际化没有想象的那么先进和高级 , 他不是文字内容的实时翻译切换 , 而是由程序员提前写好的相关内容的不同语言的文字表示进行的切换

我们先来看一个普通的页面 , 没有多语言切换的页面

在这里插入图片描述

简单使用一个表格作为例子 , 使用的是 element plus 的组件

<template>
	<el-table :data="data" border>
		<el-table-column label="状态">
			<el-switch />
		</el-table-column>
		<el-table-column label="操作">
			<el-button type="primary" text>修改</el-button>
			<el-button type="danger" text>删除</el-button>
		</el-table-column>
	</el-table>
</template>

<script setup>
import { ref } from 'vue'

let data = ref([{}])
let myName = '邵雅虎'
</script>

可以看到我们目前代码中写的中文字都是写死的 , 写死的是没办法进行语言切换的 , 现在我们来进行国际化改造 , 先将写死的内容活起来

第一步 , 引入

<script setup>
import { ref } from 'vue'
// 解构引入 vue-i18n , 我们只需要其中的 useI18n hook函数
import { useI18n } from "vue-i18n"
// 解构使用引入的hook函数 , 获得我们需要的 , 额 , 应该是个函数 t
const { t } = useI18n()

let data = ref([{}])
let myName = '邵雅虎'
</script>

第二步 , 在 script 中使用

只要使用 t 函数就可以实现读取语言文件中的内容

<script setup>
import { ref } from 'vue'
// 解构引入 i18n , 我们只需要其中的 useI18n
import { useI18n } from "vue-i18n"
// 解构引入的函数 , 获得我们需要的 , 额 , 应该是个函数 t
const { t } = useI18n()

let data = ref([{}])
// 使用 t 函数 , 将我们需要的内容的名称放入函数中
// 我猜你可能忘了这个 common.name 是什么, 没关系看下面截好的图
let myName = t('common.name')
</script>

在这里插入图片描述

第三步 , 在 template 中使用

使用和在 script 中一样 , 只不过由于是 script 的写法 , 需要在属性前加上 v-bind 绑定
我们先来看下这几个变量怎么定的 , 我写到这里还真忘了 , 我们对照着进行改造
在这里插入图片描述

<template>
	<el-table :data="data" border>
		<el-table-column :label="t('common.status')">
			<el-switch />
		</el-table-column>
		<el-table-column :label="t('common.operate')">
			<el-button type="primary" text>{{ t('common.change') }}</el-button>
			<el-button type="danger" text>{{ t('common.delete') }}</el-button>
		</el-table-column>
	</el-table>
</template>

好了 , 我们已经完成国际化改造了 , 我们来看一看效果

在这里插入图片描述
emmm 好像和之前没有什么区别 , 那不就对了 , 我们一开始就是中文的嘛

那么接下来我们就来做语言的切换 , 切换到英文上来

语言切换

语言切换的关键在哪里 ?

还记得我们写的配置文件中最后使用的 createI18n 方法吗 , 就是这里面决定了我们使用的是哪一个语言文件 , 不记得没关系 , 我们看一看关键的地方

//注册i8n实例并引入语言文件
const i18n = createI18n({
    legacy: false,
    locale: 'zh.js',
    messages: getLangAll()
})

很显然 , 我们可以大胆猜测 , locale 的属性就是语言文件 , 我们尝试将 zh.js 改为 en.js 看看有没有什么效果

果然 , 页面的语言发生了改变

在这里插入图片描述

那么我们进行语言切换的控制

我们的解决思路是 : locale 的属性值由一个函数来决定 , 函数的返回值为需要的语言文件 , 为了避免用户手动点击刷新页面时语言被自动切换回去 , 我们将需要的语言存入到 cookie 中

这里我觉得太麻烦了我就引了一个库来做 cookie 的存储 , 而且在这篇文章中没有封装
所以建议使用 cookie 这一块大家还是自己封装几个方法用一用
如果你决定照着我这篇文章走 , 请安装如下依赖 , 使用的是 VueUse
npm i @vueuse/integrations
npm i universal-cookie

如果你并不想使用这种方式使用 cookie 或者你有更好的方式 , 你可以在下面 index.js 文件中使用到 cookie 的地方使用你自己的方法

index.js

import { createI18n } from 'vue-i18n'		//引入vue-i18n组件

// 引入 cookie 的使用函数
import { useCookies } from '@vueuse/integrations/useCookies'
const cookie = useCookies()

// 引入同级目录下所有文件 , 我们的目的是引入中文文件 zh.js 和英文文件 en.js
const modules = import.meta.globEager('./*')

// 获取所有语言的详细内容
function getLangAll() {
    let message = {}
    getLangFiles(modules, message)
    return message
}

// 遍历获取每个文件中语言的详细内容
function getLangFiles(mList, msg) {
    for (let path in mList) {
        if (mList[path].default) {
            //  获取文件名
            let pathName = path.substr(path.lastIndexOf('/') + 1, 5)
            if (msg[pathName]) {
                msg[pathName] = {
                    ...mList[pathName],
                    ...mList[path].default
                }
            } else {
                msg[pathName] = mList[path].default
            }
        }
    }
}

// 写一个函数获取存储在 cookie 中的语言文件名字 , 如果没有就给中文
function getLanguage() {
    return cookie.get('localLang') || 'zh.js'
}

// 注册i8n实例并引入语言文件
const i18n = createI18n({
    legacy: false,
    locale: getLanguage(), // 使用函数返回值
    messages: getLangAll()
})

export default i18n // 将i18n暴露出去，在main.js中引入挂载

完成了 index.js 的改造 , 我们还需要一个提供语言切换的按钮

在一般项目中 , 我们通常使用下拉框来做语言的选择切换

在这里插入图片描述

这里并不打算做这个下拉框的代码 , 只打算弄两个按钮 糊弄一下在座的各位 演示一下

下面是我们上面的 .vue 文件 , 我们对他进行改造

<template>
	<el-table :data="data" border>
		<el-table-column :label="t('common.status')">
			<el-switch />
		</el-table-column>
		<el-table-column :label="t('common.operate')">
			<el-button type="primary" text>{{ t('common.change') }}</el-button>
			<el-button type="danger" text>{{ t('common.delete') }}</el-button>
		</el-table-column>
	</el-table>
	// 新增切换语言的按钮
	<el-button v-for="item, index in langs" :key="index" @click='changeLang(item)'>
		{{ item.name }}
	</el-button>
</template>

<script setup>
import { ref } from 'vue'
// 解构引入 i18n , 我们只需要其中的 useI18n
import { useI18n } from "vue-i18n"
// 解构引入的函数 , 获得我们需要的 , 额 , 应该是个函数 t
const { t } = useI18n()

let data = ref([{}])
// 使用 t 函数 , 将我们需要的内容的名称放入函数中
let myName = t('common.name')

const langs = [
    {
        name: '中文',
        lang: 'zh.js'
    },
    {
        name: 'English',
        lang: 'en.js'
    },
]

const i18n = useI18n()
const changeLang = (item) => {
    i18n.locale.value = item.lang
    cookie.set('localLang', item.lang)
    location.reload()
}
</script>

OK 这样一来我们的语言也可以切换啦

总结

使用国际化一共有以下三步

  1. 引入 vue-i18n
  2. 配置配置文件
  3. 在 .vue 文件中使用

虽然以上看起来和废话一样

结束

国际化的路程才刚开始呢 , 写多语言文件才是最烦的一件事情好吧

如果你跟着做遇到了什么问题无法实现 , 请在评论区或者私信告诉我 , 我发动网友给你解答

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

闭眼时长标准差脚本

闭眼时长标准差脚本

闭眼时长标准差脚本 闭眼时长标准差 平均闭眼时长&#xff1a;识别一分钟内闭眼次数以及每次闭眼的时长&#xff0c;将每次闭眼的时长进行累计相加&#xff0c;最终再取平均值 闭眼标准差公式 闭眼标准差((n1−navg)2(n2−navg)2...)∗1/n闭眼标准差\sqrt{((n_1-n_{avg})^2(…
阅读更多...
【广度优先搜索】N叉树的层序遍历 | 腐烂的橘子 | 单词接龙 | 最小基因变化 | 打开转盘锁

【广度优先搜索】N叉树的层序遍历 | 腐烂的橘子 | 单词接龙 | 最小基因变化 | 打开转盘锁

&#x1f320;作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《数据结构与算法要啸着学》 &#x1f387;座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;…
阅读更多...
jenkins打包构建springboot项目为docker镜像并上传nexus私服

jenkins打包构建springboot项目为docker镜像并上传nexus私服

前提&#xff1a;jenkins,docker,nexus都已经搭建完毕 一. 开启docker远程访问 1.修改docker.service文件 Docker 安装成功之后&#xff0c;首先需要修改 Docker 配置来开启允许远程访问 Docker 的功能。     文件位置&#xff1a;/lib/systemd/system/docker.service    …
阅读更多...
JVM（Java虚拟机）详解（JVM 内存模型、堆、GC、直接内存、性能调优）

JVM（Java虚拟机）详解（JVM 内存模型、堆、GC、直接内存、性能调优）

JVM&#xff08;Java虚拟机&#xff09; JVM 内存模型 结构图 jdk1.8 结构图&#xff08;极简&#xff09; jdk1.8 结构图&#xff08;简单&#xff09; JVM&#xff08;Java虚拟机&#xff09;&#xff1a; 是一个抽象的计算模型。如同一台真实的机器&#xff0c;它有自己…
阅读更多...
使用比console.log更优质的前端调试方案

使用比console.log更优质的前端调试方案

程序调试是程序开发必不可少的一环&#xff0c;刚开始接触前端调试时&#xff0c;最常用的就是 console.log 打印变量进行调试&#xff0c;本文会分享一些笔者学习到的前端调试方法&#xff0c;减少对 console.log 调试方式的依赖&#xff0c;选择更优质的前端调试方案。 本文中…
阅读更多...
Android开发进阶——RxJava核心架构分析

Android开发进阶——RxJava核心架构分析

简介 RxJava是对响应式扩展&#xff08; Reactive Extensions&#xff0c;称之为 ReactiveX &#xff09;规范的Java 实现&#xff0c;该规范还有其他语言实现&#xff1a;RxJS、Rx.Net、RxScala、RxSwift等等&#xff08;也即&#xff0c;ReactiveX 定义了规范&#xff0c;其他…
阅读更多...
pip安装时报错 ascii‘ codec can‘t decode byte 0xe2 in position...

pip安装时报错 ascii‘ codec can‘t decode byte 0xe2 in position...

在使用pip安装包的时候报错ascii’ codec can’t decode byte 0xe2 in position… 报错信息 UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe2 in position 1429: ordinal not in range(128) 以前好像见过类似的情况&#xff0c;所以搜了一下怎么修改python默认…
阅读更多...
聊聊ChatGPT

聊聊ChatGPT

最近ChatGPT火出圈。 在过去三个月里&#xff0c;眼见着它的热度火箭一般蹿升&#xff0c;据瑞银上周三发布的报告显示&#xff0c;GPT已经超过了Tiktok&#xff0c;成为人类有史以来最快突破1亿月活跃用户的互联网产品。Tiktok当初用了9个月&#xff0c;而GPT只用了2个月。 …
阅读更多...
Spring使用了哪些设计模式？

Spring使用了哪些设计模式？

目录Spring中涉及的设计模式总结1.简单工厂(非23种设计模式中的一种)2.工厂方法3.单例模式4.适配器模式5.装饰器模式6.代理模式7.观察者模式8.策略模式9.模版方法模式Spring中涉及的设计模式总结 1.简单工厂(非23种设计模式中的一种) 实现方式&#xff1a; BeanFactory。Spri…
阅读更多...
go-grpc的使用和学习

go-grpc的使用和学习

文章目录基础知识&#xff1a;操作流程安装proto文件配置grpc&#xff1a; 正常客户端发送数据(以字节流的方式)&#xff0c;服务器接受并解析&#xff0c;根据约定知道要执行什么&#xff0c;然后把结果返回给客户 rpc将上述过程封装&#xff0c;使其操作更加优化&#xff0c;…
阅读更多...
Vue 3 中的极致防抖/节流（含常见方式防抖/节流）

Vue 3 中的极致防抖/节流（含常见方式防抖/节流）

各位朋友你们好呀。今天是立春&#xff0c;明天就是正月十五元宵节了&#xff0c;这种立春 元宵相隔的时候&#xff0c;可是很难遇到的&#xff0c;百年中就只有几次。在这提前祝大家元宵快乐。 今天给大家带来的是Vue 3 中的极致防抖/节流&#xff08;含常见方式防抖/节流&a…
阅读更多...
ChatGPT给程序员人手一个，这很朋克

ChatGPT给程序员人手一个，这很朋克

目录ChatGPT、程序员、朋克为什么程序员需要ChatGPT&#xff0c;为什么这很朋克总结ChatGPT、程序员、朋克 本文由ChatGPT编写。 ChatGPT是由OpenAI开发的大型语言模型。它的核心功能是生成人类语言文本&#xff0c;因此有多种应用场景&#xff0c;如文本生成、对话生成、文本…
阅读更多...
「VUE架构」Vue2与Vue3的区别

「VUE架构」Vue2与Vue3的区别

文章目录前言一、性能比Vue2快1.2~2倍1.1 diff算法优化1.2 事件侦听缓存1.3 减少创建组件实例的开销二、 按需编译&#xff0c;体积比Vue2更小三、 Compostion API四、 支持TS五、 自定义渲染API六、更先进的组件七、 更快的开发体验前言 VUE是一套用于构建用户界面的渐进式框…
阅读更多...
Nginx常用功能举例解析

Nginx常用功能举例解析

Nginx提供的基本功能服务从大体上归纳为"基本HTTP服务"、“高级HTTP服务”和"邮件服务"等三大类。基本HTTP服务Nginx可以提供基本HTTP服务&#xff0c;可以作为HTTP代理服务器和反向代理服务器&#xff0c;支持通过缓存加速访问&#xff0c;可以完成简单的…
阅读更多...
【FPGA】Verilog：组合逻辑电路应用 | 数码管 | 8421BCD编码 | 转换七段数码管段码

【FPGA】Verilog：组合逻辑电路应用 | 数码管 | 8421BCD编码 | 转换七段数码管段码

前言&#xff1a;本章内容主要是演示Vivado下利用Verilog语言进行电路设计、仿真、综合和下载 示例&#xff1a;数码管的使用 功能特性&#xff1a; 采用 Xilinx Artix-7 XC7A35T芯片 配置方式&#xff1a;USB-JTAG/SPI Flash 高达100MHz 的内部时钟速度 存储器&#xff1a;2M…
阅读更多...
Vue-VueRouter

Vue-VueRouter

前言 Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成&#xff0c;让构建单页面应用变得易如反掌。包含的功能有&#xff1a; 嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果…
阅读更多...
SPSS聚类分析（含k-均值聚类，系统聚类和二阶聚类）

SPSS聚类分析（含k-均值聚类，系统聚类和二阶聚类）

本篇博客主要是根据1、聚类的基本知识点_哔哩哔哩_bilibili系列视频进行的学习记录一、SPSS聚类分析的基本知识点1、什么是聚类分析?聚类分析(Cluster analysis)又叫做群集分析,通过一些属性将对象或变量分成不同的组别&#xff0c;在同一类下的对象或变量在这些属性上具有一些…
阅读更多...
最全面的SpringBoot教程（四）——数据库连接

最全面的SpringBoot教程（四）——数据库连接

前言 本文为 最全面的SpringBoot教程&#xff08;四&#xff09;——数据库连接 相关知识&#xff0c;下边将对JDBC连接配置&#xff0c;与使用Druid数据源&#xff0c;从添加依赖到修改配置项再到测试进行详尽介绍~ &#x1f4cc;博主主页&#xff1a;小新要变强 的主页 &…
阅读更多...
C语言深度解剖-关键字（5）

C语言深度解剖-关键字（5）

目录 if else 组合 if else 的基本用法 注释 深入理解bool float(double)与浮点数的比较 写在最后&#xff1a; if else 组合 if else 的基本用法 #include <stdio.h>int main() {int flag 1;if (flag 1){printf("flag %d\n", flag);}else if (flag…
阅读更多...
crmeb pro多门店版二次开发

crmeb pro多门店版二次开发

重启一下swool 新创建的数据库表 ALTER TABLE eb_store_cart ADD price DECIMAL(10,2) NOT NULL DEFAULT 0 COMMENT 单独改价 AFTER status;ALTER TABLE eb_store_order ADD car_no VARCHAR(255) NOT NULL DEFAULT COMMENT 车牌号 AFTER erp_order_id, ADD frame_no VARCHA…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023