vue3 + TypeScript使用国际化

vue3 + TypeScript使用国际化

  1. 本文使用了 Vite 构建工具创建的vue3项目
  2. Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块Vite 官方中文文档
  3. 当然如果你的vue3项目未使用vite,你也可以为你的旧项目提提速,安装vite ,安装方法在上一个博客
  4. 本文使用了element-plus ui库 所以需要引入element plus 自带国际化 安装element-plus
  5. 安装 vue-i18n npm install vue-i18n
  6. 废话不多说 直接上代码
    在这里插入图片描述
    在这里插入图片描述
// lang下面的en.ts

export default {
	menu:{
		home:"home",
		system:"system"
	},
},
// lang下面的zh-cn.ts
export default {
	menu:{
		home:"首页",
		system:"设置"
	},
},
// lang下面的zh-tw.ts
export default {
	menu:{
		home:"首頁",
		system:"設定"
	},
},
  1. index.ts
import { createI18n } from 'vue-i18n';

// 定义语言国际化内容

/**
 * 说明:
 * 须在 pages 下新建文件夹(建议 `要国际化界面目录` 与 `i18n 目录` 相同,方便查找),
 * 注意国际化定义的字段,不要与原有的定义字段相同。
 * 1、/src/i18n/lang 下的 ts 为框架的国际化内容
 * 2、/src/i18n/pages 下的 ts 为各界面的国际化内容
 */

// element plus 自带国际化
import enLocale from 'element-plus/es/locale/lang/en';
import zhcnLocale from 'element-plus/es/locale/lang/zh-cn';
import zhtwLocale from 'element-plus/es/locale/lang/zh-tw';

declare type EmptyObjectType<T = any> = {
	[key: string]: T;
};
// 定义变量内容
const messages = {};
const element = { 'en': enLocale, 'zh-cn': zhcnLocale, 'zh-tw': zhtwLocale };
const itemize = { 'en': [], 'zh-cn': [], 'zh-tw': [] };
const modules: Record<string, any> = import.meta.glob("./**/*.ts",{ eager: true });

// 对自动引入的 modules 进行分类 en、zh-cn、zh-tw
// https://vitejs.cn/vite3-cn/guide/features.html#glob-import
for (const path in modules) {
	const key = path.match(/(\S+)\/(\S+).ts/);
	console.log(key)
	if (itemize[key![2]]) itemize[key![2]].push(modules[path].default);
	else itemize[key![2]] = modules[path];
}

// 合并数组对象(非标准数组对象,数组中对象的每项 key、value 都不同)
function mergeArrObj<T>(list: T, key: string) {
	let obj = {};
	list[key].forEach((i: EmptyObjectType) => {
		obj = Object.assign({}, obj, i);
	});
	return obj;
}

// 处理最终格式
for (const key in itemize) {
	console.log(itemize)
	console.log(key)
	messages[key] = {
		name: key,
		el: element[key].el,
		message: mergeArrObj(itemize, key),
	};
}

// 导出语言国际化
export const i18n = createI18n({
	legacy: false,
	silentTranslationWarn: true,
	missingWarn: false,
	silentFallbackWarn: true,
	fallbackWarn: false,
	locale: 'zh-cn',
	fallbackLocale: zhcnLocale.name,
	messages,
});
  1. main.ts 中引入
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import { i18n } from "@/i18n/index";

const app = createApp(App);

app.use(i18n);
app.use(ElementPlus);
app.mount("#app");
  1. 页面中使用
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const { locale, t } = useI18n();
const state1 = reactive({
  disabledI18n: "zh-cn",
});
const onLanguageChange = (val: string) => {
  locale.value = val;
};

const btn = () => {
  ElMessage({
    message: t("message.home.hello"),
    type: "success",
  });
};
</script>

<template>
  <main>
    <el-select
      v-model="state1.disabledI18n"
      popper-class="mp-props_i18n"
      class="m-2 mp-selectUser-i18n"
      placeholder="Select"
      @change="onLanguageChange"
    >
      <el-option label="简体中文" value="zh-cn" />
      <el-option label="English" value="en" />
      <el-option label="繁體中文" value="zh-tw" />
    </el-select>
    <el-button type="primary" @click="btn" style="margin-left:14px;">{{ $t('message.userCenter.confirmbtn') }}</el-button>
    <div>{{ $t("message.router.home") }}</div>
    <div>{{ $t("message.router.home") }}</div>
    <div>{{ $t("message.router.home") }}</div>
    <div>{{ $t("message.router.home") }}</div>
    <div>{{ $t("message.router.home") }}</div>
    <div>{{ $t("message.router.home") }}</div>
  </main>
</template>
  1. 效果展示
    在这里插入图片描述

20231222-150258

  1. 当然你可能需要将当前的语言类型进行存储,以便刷新页面或者 重新打开页面时 依然展示之前的选择。
  2. 以上为i18n的简单使用!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode:2866. 美丽塔 II | 单调栈 + 前后缀数组】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

AI“百模大战”现状:向垂直、B端谋场景,算力仍是主要制约因素

文章目录 每日一句正能量前言AI&#xff08;人工智能&#xff09;大模型正“飞入”百姓家和行业中。向垂直、B端谋场景算力仍是主要制约因素构建“数据-模型-应用”飞轮后记 每日一句正能量 我们必须在失败中寻找胜利&#xff0c;在绝望中寻求希望。 前言 在当前快速发展的人工…

MACBOOK 通过iterm2连接堡垒机跳转服务器

本公司是通过齐治堡垒机连接远程服务器的环境&#xff0c;因为连接过程中需要自动输入密码和选择主机&#xff0c;所以要使用expect工具&#xff0c;编写expect脚本remote.exp #!/usr/bin/expectif { $argc ! 7 } {send_user "usage: expect $argv0 \[JUMP_HOST\] \[JUM…

基于Java+Springboot+Vue+elememt美食论坛平台设计实现

基于JavaSpringbootVueelememt美食论坛平台设计实现 &#x1f345; 作者主页 程序定制开发 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 文章目录 基于JavaSpringbootVueelememt美食论坛平台设计实现一…

【每日一题】移除石子使总数最小

文章目录 Tag题目来源解题思路方法一&#xff1a;贪心优先队列 写在最后 Tag 【贪心优先队列】【数组】【2023-12-23】 题目来源 1962. 移除石子使总数最小 解题思路 方法一&#xff1a;贪心优先队列 思路 本题比较简单&#xff0c;思路也十分清晰。对于 k 次操作&#xf…

[MTCTF 2022]easypickle

题目给了源码 import base64 import pickle from flask import Flask, session import os import randomapp Flask(__name__) app.config[SECRET_KEY] os.urandom(2).hex()app.route(/) def hello_world():if not session.get(user):session[user] .join(random.choices(&q…

乐吾乐大屏可视化前景和发展趋势

引言 在如今数智信息化时代&#xff0c;乐吾乐大屏可视化作为信息展示和决策支持的强大工具&#xff0c;正在迅速崛起&#xff0c;并在多个行业中发挥关键作用。本文将探讨乐吾乐大屏可视化的当前状态、未来前景以及发展趋势&#xff0c;以期为读者提供对这一技术的深入了解。 …

otter-harbor同步

一. 部署及依赖 otter Github (一). 服务启动 1. mysql 5.6版本以上&#xff0c;作为 otter-manger 使用的数据库 # mysql docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD123456 -d mysql:5.7 --character-set-serverutf8mb4 --collation-serverutf8mb4_un…

抖店只能用官方电子面单?2024抖店玩法解读,附面单使用教程

我是王路飞。 正在做抖店的商家&#xff0c;应该都发现一件事情了&#xff0c;那就是现在的抖店好像不让拍单了&#xff0c;只能使用抖音的电子面单&#xff0c;打单发货。 说实话&#xff0c;这种情况已经出现过太多次了&#xff0c;导致很多商家不以为然。 我曾经也说过&a…

SpringBoot找不到或无法加载主类

1&#xff0c;bug贴图 2&#xff0c;问题说明 之所以导致这个问题是因为新建项目的时候&#xff0c;项目目录是这样的com.lab.hei.springboot.dubbo.ProviderApplication 我觉得这个目录太长了&#xff0c;所以修改了目录&#xff0c;修改后cn.alisa.springboot.dubbo.Provider…

hab_virtio hypervisor 虚拟化

Linux的 I / O 虚拟化 Virtio 框架 简而言之&#xff0c;virtio是半虚拟化管理程序中设备上的抽象层。virtio由Rusty Russell开发以支持他自己的虚拟化解决方案lguest。本文从准虚拟化和仿真设备的介绍开始&#xff0c;然后探讨的细节virtio。重点是virtio2.6.30内核发行版中的…

实在智能斩获钛媒体2023全球创新评选科技类「 大模型创新应用奖」

近日&#xff0c;历时三天的钛媒体2023 T-EDGE全球创新大会以“新视野新链接”为主题在北京隆重举办。作为科创领域全新高度的年度盛事&#xff0c;大会吸引了AI各产业链近百位海内外创投人、尖端企业家、商业领袖和国际嘉宾齐聚一堂&#xff0c;围绕新一轮AI革命、智慧数字化、…

LeetCode刷题--- 目标和

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递归递归、搜…

论文配色(强烈推荐!!!)

目录 方案1&#xff08;复古&#xff09;&#xff1a; 方案2&#xff08;新特性&#xff09;&#xff1a; 方案3&#xff08;渐变&#xff09;&#xff1a; 方案4&#xff08;清新&#xff09;&#xff1a; 方案5&#xff08;怀旧&#xff09;&#xff1a; 方案6&#xf…

数据库管理-第126期 如何将数据从11g弄到19c上(202301223)

数据库管理-第126期 如何将数据从11g弄到19c上&#xff08;202301223&#xff09; 这应该是2023年写的最后一篇关于Oracle的文章吧&#xff0c;其实手上的Oracle数据库最近都挺平稳的&#xff0c;没啥素材&#xff0c;在JiekeXu徐小强老师的群里征集了一下内容&#xff0c;其中…

基于Java+SpringBoot+vue+element疫情物资捐赠分配系统设计和实现

基于JavaSpringBootvueelement疫情物资捐赠分配系统设计和实现 &#x1f345; 作者主页 系统定制开发 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 文章目录 基于JavaSpringBootvueelement疫情物资捐赠…

零基础制作宠物用品小程序

随着人们对宠物用品的需求不断增长&#xff0c;越来越多的人开始探索如何制作一个专业的宠物用品小程序。而乔拓云作为一款功能强大的在线商城制作工具&#xff0c;成为了许多商家的首选。本文将详细介绍如何使用乔拓云制作宠物用品小程序&#xff0c;让你轻松上手&#xff0c;…

「Verilog学习笔记」序列发生器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule sequence_generator(input clk,input rst_n,output reg data);reg [3:0] cnt ; integer num 11 ; always (posedge clk or negedge rst_n) beg…

pmp到底是什么?

一、PMP是什么 PMP 是项目管理的入门级证书&#xff0c;全称是项目管理专业人士资格认证&#xff0c;由美国项目管理协会&#xff08;PMI&#xff09;举办的&#xff0c;从1999 年到现在已经有20多年发展历史了。 顾名思义&#xff0c;PMP考试就是一场评估应试者是否具备专业…

鳄鱼目标检测数据集VOC格式100张

鳄鱼是一种生活在热带和亚热带地区的爬行动物&#xff0c;属于爬行纲鳄形目鳄鱼科。它们的体形庞大&#xff0c;有粗壮的四肢和强壮的尾巴&#xff0c;一般能长到2-6米长&#xff0c;体重可达500公斤以上。鳄鱼的皮肤粗糙&#xff0c;呈灰褐色或黑色&#xff0c;布满了坚韧的鳞…