vue2中使用i18n配置elementUi切换语言

news/2024/9/22 18:22:22/

1、下载插件

javascript">npm i vue-i18n@8.22.2
2、新建文件夹i18n

3、编写index.js文件 

javascript">import Vue from "vue";
import VueI18n from "vue-i18n";
import locale from 'element-ui/lib/locale';
// 引入 elementui 的多语言
import enLocale from 'element-ui/lib/locale/lang/en'
import zhCnLocale from 'element-ui/lib/locale/lang/zh-CN'
// 引入自己定义的 I18n 文件
import en from "./lan/en.json";
import zh from "./lan/zh.json";
Vue.use(VueI18n); // 全局挂载
export const i18n = new VueI18n({locale: localStorage.getItem("lang") || "zh", // 从localStorage中获取 默认英文messages: {zh: Object.assign(zh, zhCnLocale), // 中文语言包en: Object.assign(en, enLocale) // 英文语言包}
});
locale.i18n((key, value) => i18n.t(key, value));
export default i18n;

 4、编写en.json文件和zh.json文件

5、修改main.js文件 

javascript">import Vue from 'vue'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import { i18n } from './i18n/index'
new Vue({el: '#app',i18n,render: h => h(App)
})
6、 页面显示的语法
javascript">   <!-- 这个按钮方便我们用来切换语言 --><template>   <div class="full" @click="changeLangEvent()"><span class="lan">{{language}}</span><h3 class="title">{{ $t('login.WelcomeToLogin') }}</h3></div></template><script>export default {
data (){return {language: localStorage.getItem("lang") ||"en"}},methods:{changeLangEvent() {if (this.language == "en") {this.$i18n.locale = 'zh';this.$message({message: "切换为中文!",type: "success"});localStorage.setItem("lang", "zh");this.language = "zh";} else if (this.language == "zh") {this.$i18n.locale = 'en';this.$message({message: "Switch to English!",type: "success"});localStorage.setItem("lang", "en");this.language = "en";}},}
</script>

 


http://www.ppmy.cn/news/1511142.html

相关文章

Zabbix 7.0 服务端配置文件参数参考说明

Zabbix作为一款广泛使用的开源监控系统&#xff0c;其服务器端配置涉及多个参数&#xff0c;用于定制化监控服务的行为&#xff0c;这些参数通常在zabbix_server.conf配置文件中进行设置。默认全路径为&#xff1a;/etc/zabbix/zabbix_server.conf。 以下参数来源于Zabbix 7.0版…

脚本刷导致的服务器高并发问题及解决方案

概述 在互联网服务中&#xff0c;尤其是在直播、游戏等行业&#xff0c;服务器经常面临着各种自动化脚本刷访问带来的高并发压力。这些脚本通常用于模拟正常的用户行为以达到非法目的&#xff0c;例如抢购、刷票、恶意爬取数据等。高并发不仅会消耗大量的服务器资源&#xff0…

宠物主人的精准守护--智能听诊器

宠物主人的精准守护--智能听诊器 准确性&#xff1a;选择一款准确度高的听诊器&#xff0c;让每一次检测都值得信赖。 易用性&#xff1a;用户界面简洁明了&#xff0c;让每一位宠物主人都能轻松上手。 数据共享&#xff1a;具备数据存储和共享功能&#xff0c;方便随时查看和与…

安卓相关环境配置

安卓相关环境配置 偶尔更新。。。 JEB&#xff08;动态调试好用&#xff09; JEB动态调试Smali-真机/模拟器&#xff08;详细&#xff0c;新手必看&#xff09; 夜步城 JADX官网&#xff08;静态分析&#xff09; https://github.com/skylot/jadx/releases/tag/v1.5.0 雷…

商品期权会爆仓吗?

商品期权交易中存在爆仓的情况。一个期权的价格与其基础资产的波动性密切相关。在波动性高的情况下&#xff0c;尽管收益可能更高&#xff0c;但投资者也需要面对更大的价格波动风险&#xff0c;商品期权有买方和卖方&#xff0c;买方无爆仓风险&#xff0c;卖方是保证金交易有…

ThreadPoolExecutor详解

恰逢经济下行&#xff0c;鄙人工作、生活日趋艰难&#xff0c;原本美好的愿望&#xff0c;如今只能成为奢望。不知如何是好的我&#xff0c;只能精研近几年来因浮躁而荒废的知识。今天就想跟大家聊一个对我来讲看似熟悉实则陌生的工具——ThreadPoolExecutor。熟悉是因为在我负…

2024新型数字政府综合解决方案(七)

新型数字政府综合解决方案通过集成人工智能、大数据、区块链和云计算技术&#xff0c;创建了一个高度智能化和互联互通的政府服务平台&#xff0c;旨在全面提升行政效率、服务质量和透明度。该平台实现了跨部门的数据整合与实时共享&#xff0c;利用人工智能进行智能决策支持和…

工具/平台--分享(杂乱)

目录 ARL灯塔 tmux--终端复用 Hfish docker安装 Docker 快速入门 docker镜像源 MSF--Viper CS相关资料 国内威胁情报平台 国外威胁情报平台 SRC漏洞提交平台: ARL灯塔 https://github.com/huntingsec/ARL-Limited-Edition 5003 tmux--终端复用 tmux tmux ls CtrlB …