vue怎么实现国际化? vue-i18n 插件实现国际化,支持切换不同语言

依赖的文档开始 | Vue I18n

一、安装 

npm install vue-i18n

如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n

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

二、使用

在 src 下创建 lang 文件夹

1.准备语言包

这里我们用中文和英文的来举例,在lang文件下创建en.js和zh,js

// en.js
export default {login: {username: 'Username',password: 'Password'},
}
// zh.js
export default {login: {username: '用户名',password: '密码'},
}

2、准备翻译的语言环境

在 lang 下创建 index.js,使用如上的两种语言包。

// index.js
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 enLocale from './en'
import zhLocale from './zh'Vue.use(VueI18n)const messages = {en: {...enLocale,...elementEnLocale},zh: {...zhLocale,...elementZhLocale}
}const i18n = new VueI18n({// 设置语言 选项 en | zhlocale: Cookies.get('language') || 'zh',// 设置文本内容messages
})export default i18n

3、实现语言翻译

import i18n from './lang'
// use使用添加i18n
Vue.use(Element, {i18n: (key, value) => i18n.t(key, value)
})
new Vue({el: '#app',router,store,i18n,//注入render: h => h(App)
})
如何使用
<template><div >{{$t('login.password')}}</div>
</template>
实现语言切换
  <template><el-dropdown trigger="click" class="international" @command="handleSetLanguage"><div><svg-icon class-name="international-icon" icon-class="language" /></div><el-dropdown-menu slot="dropdown"><el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item><el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template>computed: {language() {return this.$store.getters.language}},methods: {handleSetLanguage(lang) {this.$i18n.locale = lang;   //设置当前语言// this.$store.dispatch('app/setLanguage', lang);this.$message({message: '设置语言成功',type: 'success'})},}

到这里就可以实现语言切换了

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

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

相关文章

MYSQL 处理重复数据

文章目录 前言防止表中出现重复数据统计重复数据过滤重复数据删除重复数据在这里插入代码片后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正…

实现【Linux--NTP 时间同步服务搭建】

实现【Linux--NTP 时间同步服务搭建】 &#x1f53b; 前言&#x1f53b; 一、NTP 校时&#x1f530; 1.1 NTP 服务校时与 ntpdate 校时的区别&#x1f530; 1.2 NTP 校时服务搭建&#x1f530; 1.2.1 确认 ntp 的安装&#x1f530; 1.2.2 配置 ntp 服务&#x1f530; 1.2.3 启动…

大数据面试大厂真题【附答案详细解析】

1.Java基础篇&#xff08;阿里、蚂蚁、字节、携程、快手、杭州银行等&#xff09; 问题&#xff1a;HashMap的底层实现原理 答案&#xff1a; 在jdk1.8之前&#xff0c;hashmap由 数组-链表数据结构组成&#xff0c;在jdk1.8之后hashmap由 数组-链表-红黑树数据结构组成&…

openpnp - 给底部相机加防尘罩

文章目录 openpnp - 给底部相机加防尘罩概述笔记END openpnp - 给底部相机加防尘罩 概述 设备标定完, 看着底部相机, 有点担心掉进去东西, 万一从吸嘴掉下去的料(或者清理设备台面时, 不小心掉进去东西)将顶部相机搞短路怎么办. 就想加个防尘罩, 如果有东西掉进去, 可以掉到机…

makefile 学习(5)完整的makefile模板

参考自&#xff1a; (1&#xff09;深度学习部署笔记(二): g, makefile语法&#xff0c;makefile自己的CUDA编程模板(2&#xff09;https://zhuanlan.zhihu.com/p/396448133(3) 一个挺好的工程模板&#xff0c;(https://github.com/shouxieai/cpp-proj-template) 1. c 编译流…

开源vs闭源,处在大模型洪流中,向何处去?

文章目录 一、开源和闭源的优劣势比较1.1 开源优势1.2 闭源的优势 二、开源和闭源对大模型技术发展的影响2.1 数据共享2.2 算法创新2.3 业务拓展2.4 安全性和隐私2.5 社会责任和伦理 三、开源与闭源的商业模式比较3.1 盈利模式3.2 市场竞争3.3 用户生态3.4 创新速度 四&#xf…

shiro的前后端分离模式

shiro的前后端分离模式 前言&#xff1a;在上一篇《shiro的简单认证和授权》中介绍了shiro的搭建&#xff0c;默认情况下&#xff0c;shiro是通过设置cookie&#xff0c;使前端请求带有“JSESSION”cookie&#xff0c;后端通过获取该cookie判断用户是否登录以及授权。但是在前…

二十三种设计模式全面解析-深入探究备忘录模式:保留过去,预见未来

在软件开发中&#xff0c;我们经常需要处理对象状态的保存和恢复问题。备忘录模式&#xff08;Memento Pattern&#xff09;提供了一种优雅的解决方案&#xff0c;能够在不破坏封装性的情况下&#xff0c;捕获和恢复对象的内部状态。本文将深入探讨备忘录模式的技术细节&#x…

【git error|SourceTree】error: bad signature 0x00000000 fatal: index file corrupt

报错 error: bad signature 0x00000000 fatal: index file corrupt 场景 在使用git add . 提交代码到缓冲区时或使用SourceTree时电脑宕机&#xff0c;重启后再次提交代码会出现该提示 原因分析 .git目录下的index文件损坏 解决方式 //删除索引文件 rm -f .git/index //回…

TCP/IP协议、三次握手、四次挥手

TCP/IP TCP/IP协议分层TCP头部三次握手TCP四次挥手常见问题1、什么是TCP网络分层2、TCP为什么是三次握手&#xff0c;不是两次或者四次&#xff1f;3、TCP为什么是四次挥手&#xff0c;为什么不能是三次挥手将第二次挥手和第三次挥手合并&#xff1f;4、四次挥手时为什么TIME_W…

ZKP11.4 Use CI to instantiate Fiat-Shamir

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 11: From Practice to Theory (Guest Lecturer: Alex Lombardi) 11.4 Use CI to instantiate Fiat-Shamir Avoid Bad Challenges Def: Given false claim x x x and a first message α \alpha α, a challenge β \beta …

再见 Pandas,再见算法

大家好,《再见pandas》 系列已有200多位朋友加入学习了,这段时间亲眼见证了很多朋友的飞跃进步,从无到有,从一个问问题的小白到开始慢慢回答别人的问题,在讨论和练习中不断成长。虽说pandas已经很普及了,但普及内容的深度却远远不够。 下面这套原创图文是我和几位小伙伴…

常用的git命令完整详细109条

Git是一个很强大的分布式版本控制系统&#xff0c;以下是一些常用的git命令&#xff1a; git init&#xff1a;在当前目录下创建一个新的Git仓库。git add 文件名&#xff1a;将指定的文件添加到暂存区&#xff0c;准备提交。git commit -m “备注”&#xff1a;提交暂存区的文…

C++ 数据结构之-最小栈(MinStack)

最小栈 最小栈&#xff08;Min Stack&#xff09;是一个支持常数时间复杂度获取栈中最小元素的特殊栈数据结构。通常&#xff0c;标准的栈数据结构只支持在常数时间内执行入栈&#xff08;push&#xff09;和出栈&#xff08;pop&#xff09;操作&#xff0c;但无法在常数时间内…

听说还有人不知道如何实现水平垂直居中?

HTML 代码部分 块级元素 <div class"parent"><div class"child">child</div> </div>行内元素 <div class"parent"><span class"child">child</span> </div>水平垂直居中 1、行内…

C++ STL map迭代器失效问题

最近在开发过程中&#xff0c;定位一个问题的时候&#xff0c;发现多线程场景下大量创建和销毁某个C:\Windows\System32\reg.exe时出现了383个进程创建消息处理的接口&#xff0c;和384个进程销毁处理消息的接口都在等待锁&#xff0c;另外一个线程也在等锁&#xff0c;后面看了…

mysql8下载与安装教程

文章目录 1. MySQL下载2. 方式一&#xff1a;msi文件安装2.1 安装2.2 添加环境变量2.3 登录mysql 3. 方式二&#xff1a;zip文件安装3.1 安装3.2 配置文件3.3 加入环境变量3.4 初始化mysql3.5 登录mysql 1. MySQL下载 以下两个网址二选一 官网&#xff1a;https://downloads.…

CPU、GPU、TPU内存子系统架构

文章目录 CPU、GPU、TPU内存子系统架构概要CPUGPUTPU共同点和差异&#xff1a; CPU、GPU、TPU内存子系统架构 概要 Memory Subsystem Architecture&#xff0c;图源自TVM CPU CPU&#xff08;中央处理器&#xff09;的内存子系统&#xff1a;隐式管理 主内存&#xff08;…

lv11 嵌入式开发 C工程与寄存器封装 10

目录 1 C语言工程介绍 1.1 工程模板介绍 1.2 启动代码分析 2 C语言实现LED实验 2.1 C语言如何实现寄存器读写 2.2 实现LED实验 2.3 练习 1 C语言工程介绍 1.1 工程模板介绍 工程目录&#xff0c;后续代码都会利用到这个目录 interface.c 写了一个main函数的框架 int …

BERT-pytorch源码实现,解决内存溢出问题

BERT-pytorch源码实现&#xff0c;解决内存溢出问题 相信大家很多人都在做BERT这个模型&#xff0c;但是&#xff0c;有些人可能就是直接从transfermer这个模型里直接导入数据&#xff0c;但是这种方法不方便我们修改模型&#xff0c;于是有些人就通过pytorch详细实现了BERT,但…