当前位置: 首页 > news >正文

vue中使用element的i18n语言转换(保姆式教程-保证能用)

话不多说,先看效果:预览地址: https://sandm00.github.io/i18n-switch/#/
1、项目中需要使用的插件,vue2或vue3、element、vue-i18n、js-cookie、vuex我是在vue2中使用

npm i element-ui -S
npm i js-cookie -S
npm i vue-i18n@8.28.2  //因为我项目使用的vue2,直接安装报错了,就下载了固定的版本

2、在main.js中引入i18n

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';//引入element
import 'element-ui/lib/theme-chalk/index.css';//引入element样式
import i18n from './lang'//引入语言包
Vue.use(ElementUI, {i18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false
new Vue({router,store,i18n,render: h => h(App)
}).$mount('#app')

3、创建lang文件夹,然后对应的js语言文件
在这里插入图片描述
index文件是处理语言切换的文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
import esLocale from './es'
import jaLocale from './ja'Vue.use(VueI18n)const messages = {en: {...enLocale,...elementEnLocale},zh: {...zhLocale,...elementZhLocale},es: {...esLocale,...elementEsLocale},ja: {...jaLocale,...elementJaLocale}
}
export function getLanguage() {const chooseLanguage = Cookies.get('language')if (chooseLanguage) return chooseLanguage// if has not choose languageconst language = (navigator.language || navigator.browserLanguage).toLowerCase()const locales = Object.keys(messages)for (const locale of locales) {if (language.indexOf(locale) > -1) {return locale}}return 'zh'
}
const i18n = new VueI18n({// set locale// options: en | zh | eslocale: getLanguage(),// set locale messagesmessages
})
export default i18n

zh.js文件,中文语言包

export default {hello: {title: "欢迎进入vue+node后台管理系统"},about:'这是about页面'}

en.js 英文语言包

export default {hello: {title: "Welcome to the Vue+node backend management system"},about: 'This is an about page'}

其他的语言类似以上操作,创建xx.js的文件,在lang文件夹下面的index.js引入并且在messages里面使用即可
在这里插入图片描述
因为要在最外层切换,所以需要使用vuex,又想刷新语言不丢失,可以保存在本地
在store里面创建app.js模块

import Cookies from 'js-cookie'
import { getLanguage } from '@/lang/index'const state = {language: getLanguage(),
}const mutations = {SET_LANGUAGE: (state, language) => {state.language = languageCookies.set('language', language)},
}const actions = {setLanguage({ commit }, language) {commit('SET_LANGUAGE', language)},
}export default {namespaced: true,state,mutations,actions
}

然后在index.js引入模块即可
在页面中进行语言切换

<el-button type="primary" v-for="(item, index) in btnList" :key="index" @click="handleClick(item)">{{ item.name }}</el-button>{{ $t('hello.title') }}    //使用的语言包btnList: [{name: '中文',type: 'zh'},{name: 'English',type: 'en'},{name: 'Español',type: 'es'},{name: '日本語',type: 'ja'}]
//方法handleClick(lang) {this.$i18n.locale = lang.typethis.$store.dispatch('app/setLanguage', lang.type)this.$message({message: lang.name + ':' + 'Switch Language Success',type: 'success'})}

详细页面代码

<template><div class="home"><el-button type="primary" v-for="(item, index) in btnList" :key="index" @click="handleClick(item)">{{ item.name }}</el-button>{{ $t('hello.title') }}<router-link to="/about">about</router-link><router-view></router-view></div>
</template>
<script>
export default {name: 'Home',data() {return {btnList: [{name: '中文',type: 'zh'},{name: 'English',type: 'en'},{name: 'Español',type: 'es'},{name: '日本語',type: 'ja'}]}},methods: {handleClick(lang) {this.$i18n.locale = lang.typethis.$store.dispatch('app/setLanguage', lang)this.$message({message: lang.name + ':' + 'Switch Language Success',type: 'success'})}},components: {}
}
</script>

效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章:

vue中使用element的i18n语言转换(保姆式教程-保证能用)

话不多说&#xff0c;先看效果:预览地址: https://sandm00.github.io/i18n-switch/#/ 1、项目中需要使用的插件&#xff0c;vue2或vue3、element、vue-i18n、js-cookie、vuex我是在vue2中使用 npm i element-ui -S npm i js-cookie -S npm i vue-i18n8.28.2 //因为我项目使用…...

01 设计模式--单例模式

1. 单例模式 单例模式有两种实现方式&#xff1a; 1.1 饿汉模式&#xff08;Eager Initialization&#xff09;&#xff1a;在类加载时就创建单例实例&#xff0c;无论是否需要使用该实例。 饿汉模式在类加载时就创建单例实例&#xff0c;无论是否需要使用该实例。 饿汉模式…...

css backdrop-filter 实现背景滤镜

官方给出的定义是&#xff1a;backdrop-filter属性允许您将图形效果&#xff08;如模糊或颜色偏移&#xff09;应用于元素后面的区域。因为它适用于元素后面的所有内容&#xff0c;所以要查看元素或其背景的效果&#xff0c;需要透明或部分透明。 大致分为以下10种&#xff1a…...

AR人脸道具SDK解决方案,实现道具与人脸的自然融合

AR人脸道具SDK解决方案&#xff0c;实现道具与人脸的自然融合美摄科技以其卓越的技术实力和创新能力&#xff0c;为企业带来了全新的AR人脸道具SDK解决方案。这一解决方案将为企业打开全新的市场机会&#xff0c;为用户带来前所未有的互动体验。 颠覆传统&#xff0c;开启AR人…...

Windows安装RabbitMQ教程(附安装包)

需要两个安装包 Erlang 安装包: https://download.csdn.net/download/Brevity6/89274663 (自己从官网下载也可以) RabbitMQ Windows 安装包&#xff1a; https://download.csdn.net/download/Brevity6/89274667 (自己从官网下载也可以) Erlang安装 Erlang安装傻瓜式下一…...

这个问题无人能解,菜鸟勿进

前言 这是陈旧已久的草稿2021-06-23 23:25:12 现在2024-5-12 21:53:46&#xff0c;发布到[逻辑题]专栏中。 一、问题 1.描述&#xff1a; 在我的世界中建个红石电路 2.需求&#xff1a; 五个灯A、B、C、D、E、F 五个开关a、b、c、d、e、f、总开关 3.要求&#xff1a; 总开关…...

揭秘高效引流获客的艺术:转化技巧大公开

在数字化营销的海洋中&#xff0c;每个企业都如同一艘努力航行的船&#xff0c;而流量便是推动船只前行的风帆。如何有效吸引并获取潜在客户&#xff0c;即所谓的“引流获客”&#xff0c;已成为企业市场营销策略中不可或缺的一环。本文将详细探讨几种实用且高效的引流获客技巧…...

【Unity 鼠标输入检测】

Unity 鼠标输入检测 Unity提供了多种方法来检测和处理鼠标输入&#xff0c;允许开发者在游戏中实现对鼠标移动、点击和滚轮滚动的响应。以下是一些基本的鼠标输入检测方法&#xff1a; 1. Input.mousePosition 这个属性返回当前鼠标指针的屏幕坐标。坐标是以像素为单位的&…...

LeetCode hot100-33-Y

148. 排序链表 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 这题能通过但是投机取巧了&#xff0c;一般应该不能这样做&#xff0c;直接把节点里的值拿出来&#xff0c;排序后再更新每个节点的值。 /*** Definition for singly-linked list.* p…...

C++和Python通信引文道路社评电商大规模行为图结构数据模型

&#x1f3af;要点 &#x1f3af;图论数学逻辑和计算&#xff1a;&#x1f58a;定向网络节点和边 | &#x1f58a;节点的入度 | &#x1f58a;出度和度 | &#x1f58a;源节点 | &#x1f58a;汇节点 | &#x1f58a; 孤立节点 | &#x1f58a;入度分布和出度分布 | &#x1f…...

单片机-点亮第一盏灯

原理图 需求&#xff1a;点亮或是熄灭LED 通过控制 P5.3引脚输出高电平时&#xff0c;LED灯就点亮&#xff0c;输出低电平时LED灯就熄灭 1.项目创建 新建项目 配置开发板信息 当前位STC芯片的开发板&#xff0c;选择STC MCU Database 搜素具体芯片型号&#xff0c;进行配置…...

C++组合类

类的数据成员不但可以是基本类型&#xff0c;也可以是其它类的对象。 组合类就是指一个类包含其他类的对象作为该类的数据成员。 当组合类创建对象时&#xff0c;其中包含的各个数据成员对象应首先被创建。因此&#xff0c;在创建类的对象时&#xff0c;既要对本类的基本…...

Linux学习笔记3

建立最小linux系统【续】 书接上文&#xff0c;上一篇我们分析了rcS和ifconfig-eth0文件&#xff0c;接下来我们继续讲下去 passwd文件 之后在init.d的上一级目录etc下建立passwd文件&#xff0c;内容如下 root::0:0:root:/:/bin/sh bin:*:1:1:bin:/bin:daemon:*:2:2:daemo…...

免费证件照一键换底色

最近星期天在家搞了一个小工具&#xff0c;在这里分享下! 废话不多说看看效果&#xff1a; 效果还不错&#xff0c;需要的可以联系我!!!!!!!!! 别的网上可都是一次五块钱这种。太贵了。。&#xff01;&#xff01;...

使用 FFmpeg 从音视频中提取音频

有时候我们需要从视频文件中提取音频&#xff0c;并保存为一个单独的音频文件&#xff0c;我们可以借助 FFmpeg 来完成这个工作。 一、提取音频&#xff0c;保存为 mp3 文件: 要使用 FFmpeg 从音视频文件中提取音频&#xff0c;并将 ACC 编码的音频转换为 MP3 格式&#xff0…...

GraphQL在现代Web应用中的应用与优势

GraphQL是一种现代的API查询语言&#xff0c;它在现代Web应用中得到了广泛的应用&#xff0c;因为它提供了一种高效、灵活且强大的方式来获取数据 GraphQL基础快速应用示例&#xff1a; 1. 后端设置&#xff08;使用graphql-yoga&#xff09; 首先&#xff0c;我们需要创建一…...

socket编程 学习笔记 理解

在使用socket&#xff08;也就是套接字&#xff09;编程的时候&#xff0c;其实是工作于应用层和传输层之间 如果使用的是基于TCP的socket&#xff0c;那每个数据包的发送的过程大致为&#xff1a; 数据通过socket套接字构造符合TCP协议的数据包在屏蔽底层协议的情况下&#…...

SC-Lego-LOAM建图与ndt_localization的实车实现

参考&#xff1a;https://blog.csdn.net/weixin_44303829/article/details/121524380 https://github.com/AbangLZU/SC-LeGO-LOAM.git https://github.com/AbangLZU/ndt_localizer.git 将建图和定位分别使用lego-loam和ndt来进行&#xff0c;实车上的效果非常不错&#xff0c;…...

vs code中如何使用git

由于本地代码有了一些储备&#xff0c;所以想通过网址托管形式&#xff0c;之前一直使用了github&#xff0c;但是鉴于一直被墙&#xff0c;无法登录账号&#xff0c;所以选择了国内的gitee来作为托管网站。 gitee的网址&#xff1a;Gitee - 基于 Git 的代码托管和研发协作平台…...

Vue项目中如何通过配置修改项目名称

Vue项目中如何通过配置修改项目名称 前言 部分vue项目中为了不直接修改 index.html 文件而使用 config 配置文件进行修改&#xff0c;好处就是项目配置比较集中好管理、可实现动态化修改。 具体配置和使用 项目中 index.html 配置标题名&#xff0c;可以看到 <title>…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...