uniapp-Vue项目如何实现国际化,实现多语言切换,拒绝多套开发,一步到位,看这篇就够

本文主要是介绍uniapp-Vue项目如何实现国际化,实现多语言切换,拒绝多套开发,一步到位,看这篇就够,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一  安装

找到自己的项目,输入cmd进入命令行,输入安装命令,点击回车进行下载:

npm install vue-i18n@next

下载完将在项目的配置文件中看到:

二  使用

2.1 在项目中创建一个文件夹如:lang 用于存放不同语言的包。这些语言文件通常为JSON格式

2.2 在项目main.js文件中引入并初始化VueI18n。这包括引入上述创建的语言文件,并配置VueI18n:

import i18n from '@/lang/index' // 引入国际化配置//这行代码是 Vue 2 的标准写法,不要使用 Vue 3 的 createApp 语法。
// Vue.prototype.$store = store
// Vue.config.productionTip = false// 创建 Vue 实例,并注入 i18n
const app = new Vue({i18n, // 注入国际化store,render: h => h(App)
})

在lang下创建 en.js  zh.js  index.js 分别写入下面代码

index.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import zh from './zh';
import en from './en';
// 需要什么语言都要导入// 使用 Vue 2 的 VueI18n
Vue.use(VueI18n);const i18n = new VueI18n({locale: localStorage.getItem('language') || 'zh', // 默认语言为中文messages: {zh,en,},
});export default i18n;

英文包:en.js

//en.js
export default {language:{// 这里面放 所有的英文替换词}
}

中文包:zh.js

//en.js
export default {language:{// 这里面放 所有的中文替换词}
}

三 以登录界面为例

3.1 首先找好图标,对界面加个图标做个触发

		// 切换语言 逻辑处理switchLanguage() {const newLanguage = this.$i18n.locale === 'zh' ? 'en' : 'zh';this.$i18n.locale = newLanguage;localStorage.setItem('language', newLanguage);this.languageIcon = newLanguage === 'en' ? '/static/china.png' : '/static/en.png';},

3.2 对页面需要国际化的每个组件都可以使用 $t 方法来获取国际化文本。

在 zh.js 和 en.js 文件中添加对应的语言内容

// en.js 登录内容如下export default {language: {//login 登录界面welcome: "Smart Education Platform",phonePlaceholder: "Please enter your phone number",codePlaceholder: "Please enter the verification code",getCode: "Get Code",login: "Login",cancelLogin: "Cancel Login",loginSuccess: "Login Successful",phoneError: "Invalid phone number format!",phoneEmpty: "Phone number cannot be empty!",codeError: "Invalid verification code format!",codeEmpty: "Verification code cannot be empty!",codeSent: "Verification code sent",loginFailed: "Login failed, please try again",}
}
// zh.js 登录界面元素需国际化的内容如下
export default {language: {// login 登录界面welcome: "智教平台",phonePlaceholder: "请输入手机号",codePlaceholder: "请输入验证码",getCode: "获取验证码",login: "登 录",cancelLogin: "取消登录",loginSuccess: "登录成功",phoneError: "手机号格式不正确!",phoneEmpty: "手机号不能为空!",codeError: "验证码格式不正确!",codeEmpty: "验证码不能为空!",codeSent: "验证码已发送",loginFailed: "登录失败,请重试",}
}

其他页面同理.只需要都写在对应的语言包文件下进行说明即可

同理也可以添加其它语言,做好语言选择的切换

界面完整代码:

<template><view class="tp-login-box tp-flex tp-flex-col tp-box-sizing"><!-- 语言切换按钮 --><view class="language-switch"><image :src="languageIcon" @tap="switchLanguage" class="language-icon" /></view><view class="tp-pd-t-b-30"></view><view class="tp-flex tp-login-welcome tp-flex-col tp-mg-t-b-50"><view class="fishTitle">{{ $t('language.welcome') }}</view><!-- 添加的Logo --><view class="tp-mg-t-b-20"><image src="/static/image/Logo.png" alt="logo" class="logo" /></view></view><!-- 手机号输入框 --><viewclass="tp-ipt tp-box-sizing tp-mg-t-b-20 tp-pd-t-b-15 tp-pd-l-r-30 tp-flex tp-flex-row tp-flex-j-l tp-flex-a-c":class="{'shake': phoneError}"><view class="inputicon"><image src="/static/shoujihao.png" alt=""></view><input type="text" placeholder-class="tp-plc" :placeholder="$t('language.phonePlaceholder')"v-model="phoneNumber" @blur="validatePhoneNumber" /></view><view v-if="phoneError" class="error-msg">{{ phoneErrorMsg }}</view><!-- 验证码输入框 --><viewclass="tp-ipt tp-box-sizing tp-mg-t-b-20 tp-pd-t-b-15 tp-pd-l-r-30 tp-flex tp-flex-row tp-flex-j-l tp-flex-a-c":class="{'shake': codeError}"><view class="inputicon"><image src="/static/yanzhengma-.png" alt=""></view><input type="text" placeholder-class="tp-plc" :placeholder="$t('language.codePlaceholder')"v-model="verificationCode" @blur="validateVerificationCode" /><view class="inputcode" @tap="requestVerificationCode">{{ $t('language.getCode') }}</view></view><view v-if="codeError" class="error-msg">{{ codeErrorMsg }}</view><!-- 登录按钮 --><view class="btn"><button class="tp-btn tp-mg-t-50" :loading="loading"@tap="doLoginSubmit">{{ $t('language.login') }}</button></view><view class="tp-getpwd tp-mg-t-40 tp-flex tp-flex-row tp-flex-j-c tp-flex-a-c" @tap="doLoginCancel">{{ $t('language.cancelLogin') }}</view><!-- 授权登录 --><uni-popup ref="authPopup" type="bottom"><authorize @getuserinfo="getAuth" @cancel="toCloseLogin"></authorize></uni-popup><!-- 登录成功提示框 --><uni-popup ref="successPopup" type="center" :mask="true" :maskClick="false"><view class="popup-content">{{ $t('language.loginSuccess') }}</view></uni-popup></view>
</template><script>export default {data() {return {loading: false, // 按钮的加载状态phoneNumber: '', // 存储用户的手机号verificationCode: '', // 存储验证码phoneError: false, // 手机号输入框错误标记phoneErrorMsg: '', // 手机号错误信息codeError: false, // 验证码输入框错误标记codeErrorMsg: '', // 验证码错误信息languageIcon: localStorage.getItem('language') === 'en' ? '/static/china.png' : '/static/en.png' // 语言切换图标}},methods: {// 切换语言switchLanguage() {const newLanguage = this.$i18n.locale === 'zh' ? 'en' : 'zh';this.$i18n.locale = newLanguage;localStorage.setItem('language', newLanguage);this.languageIcon = newLanguage === 'en' ? '/static/china.png' : '/static/en.png';},// 验证手机号输入框validatePhoneNumber() {const phoneRegex = /^1[3-9]\d{9}$/;if (!this.phoneNumber) {this.phoneError = true;this.phoneErrorMsg = this.$t('language.phoneEmpty');return false;} else if (!phoneRegex.test(this.phoneNumber)) {this.phoneError = true;this.phoneErrorMsg = this.$t('language.phoneError');return false;}this.phoneError = false;this.phoneErrorMsg = '';return true;},// 验证验证码输入框validateVerificationCode() {const codeRegex = /^\d{4}$/; // 假设验证码为4位数字if (!this.verificationCode) {this.codeError = true;this.codeErrorMsg = this.$t('language.codeEmpty');return false;} else if (!codeRegex.test(this.verificationCode)) {this.codeError = true;this.codeErrorMsg = this.$t('language.codeError');return false;}this.codeError = false;this.codeErrorMsg = '';return true;},// 请求验证码的APIrequestVerificationCode() {if (!this.validatePhoneNumber()) return;// 调用发送验证码的APIuni.request({url: 'http://192.168.0.180:8090/v1/api/system/send_captcha', // 发送验证码的API地址method: 'POST',data: {phone: this.phoneNumber // 传递手机号},success: (res) => {console.log(res.data);if (res.data.code == 2000) {this.codeErrorMsg = this.$t('language.codeSent');this.codeError = true;} else {this.codeErrorMsg = res.data.message || this.$t('language.loginFailed');this.codeError = true;}},fail: (err) => {this.codeErrorMsg = this.$t('language.loginFailed');this.codeError = true;}});},// 处理登录过程doLoginSubmit() {if (!this.validatePhoneNumber() || !this.validateVerificationCode())return;this.loading = true;// 调用登录的APIuni.request({url: 'http://192.168.0.180:8090/v1/api/system/login', // 登录的API地址method: 'POST',header: {'Content-Type': 'application/json'},data: {phone: this.phoneNumber, // 传递手机号code: this.verificationCode // 传递验证码},success: (res) => {console.log(res.data);if (res.data.code == 2000) {uni.setStorageSync('access_token', res.data.data.token); // 存储访问令牌this.$refs.successPopup.open(); // 显示登录成功提示框setTimeout(() => {uni.switchTab({url: '/pages/deviceManage/deviceManage' // 登录成功后跳转到首页});}, 1000);} else {this.phoneErrorMsg = res.data.message || this.$t('language.loginFailed');this.phoneError = true;}},fail: (err) => {this.phoneErrorMsg = this.$t('language.loginFailed');this.phoneError = true;},complete: () => {this.loading = false;}});},// 取消登录并返回上一页doLoginCancel() {uni.navigateBack(-1);},}}
</script><style>@import url("@/common/login.css");.language-switch {position: absolute;top: 20px;right: 20px;z-index: 100;}.language-icon {width: 30px;height: 30px;}/* 抖动动画 */@keyframes shake {0%,100% {transform: translateX(0);}20%,60% {transform: translateX(-10px);}40%,80% {transform: translateX(10px);}}.shake {animation: shake 0.5s ease;}.error-msg {color: red;font-size: 12px;text-align: center;margin-top: -10px;margin-bottom: 10px;}.popup-content {font-size: 18px;color: #000;padding: 20px;text-align: center;}
</style>

这篇关于uniapp-Vue项目如何实现国际化,实现多语言切换,拒绝多套开发,一步到位,看这篇就够的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1114416

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象