Vue实现多语言(i18n)

news2024/11/23 15:25:45

第一步

安装i18n插件。

npm install vue-i18n

第二步

在src目录下,创建一个【language】文件夹,并创建两个语言包js文件。
中文语言包:【zh.js】
英文语言包:【en.js】
在这里插入图片描述

第三步

完善en.js文件和zh.js文件。两个文件的结构要相同。如果用Element-UI,这里导入。
en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    'system' : {
        'home' : 'Home'
    },
    'button': {
        'login': 'Login'
    },
    'table' : {

    },
    'detail' : {

    },
    ...enLocale
}
export default en

zh.js

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const zh = {
    'system' : {
        'home' : '首页'
    },
    'button': {
        'login': '登陆'
    },
    'table' : {

    },
    'detail' : {

    },
    ...zhLocale
}
export default zh

第四步

在main.js引入插件。

//i18n插件
import VueI18n from 'vue-i18n';
// element-ui多语言文件
import locale from 'element-ui/lib/locale';

// 本地多语言文件
import zh from "./language/zh";
import en from "./language/en";


Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: sessionStorage.getItem('locale') || 'zh',
    messages: {
        zh: zh,
        en: en
    }
});


locale.i18n((key, value) => i18n.t(key, value))

new Vue({
    router,
    i18n,
    render: h => h(App)
}).$mount('#app');

第五步

在页面上使用和切换。
使用:

<el-button type="primary" @click="submitForm()">{{$t("button.login")}}</el-button>

切换:

switchLanguage() {
    //先获取当前语言,
   var locale = sessionStorage.getItem('locale') || 'zh';
   if(locale == 'en') {
       this.$i18n.locale = 'zh';
       sessionStorage.setItem('locale','zh');
   } else {
       this.$i18n.locale = 'en';
       sessionStorage.setItem('locale','en');
   }
}

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

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

相关文章

系统架构设计师-项目管理

目录 一、盈亏平衡分析 二、进度管理 1、WBS工作分解结构 2、进度管理流程 &#xff08;1&#xff09;活动定义 &#xff08;2&#xff09;活动排序 &#xff08;3&#xff09;活动资源估算&#xff1a; &#xff08;4&#xff09;活动历时估算&#xff1a; &#xff08;5&…

谷歌浏览器添加首页快捷方式,并设置默认搜索引擎为百度

目录 1、添加首页快捷方式 ​2、谷歌浏览器设置默认搜索引擎 1、添加首页快捷方式 &#xff08;1&#xff09;首先要保证当前的默认搜索引擎为Google才可以添加首页的快捷方式。 &#xff08;2&#xff09;回到首页即可添加和自定义快捷方式的url &#xff08;3&#xff09;默…

Linux——系统文件IO(文件操作符 详解+代码)

文件操作符 1.回顾C语言文件接口总结 2.系统文件IO2.1 open函数介绍2.2代码测试2.3Q :fd为什么是3&#xff1f;012去哪里了&#xff1f;A: 3.如何理解Linux下一切皆文件 1.回顾C语言文件接口 写文件 #include <stdio.h> #include <string.h> int main() { FILE *…

【双指针】24. 两两交换链表中的节点

24. 两两交换链表中的节点 解题思路 dummyNode指向22 指向11 指向3然后移动指针 开始交换 3 4 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* L…

OpenAI GPT-4 Code Interpreter测试

OpenAI GPT-4 Beta版本Code Interpreter功能分析 OpenAI最近在GPT-4中推出了Code Interpreter功能的Beta版本&#xff0c;它是ChatGPT的一个版本&#xff0c;可以编写和执行Python代码&#xff0c;并处理文件上传。以下是对其表现的基本分析。 主要功能 文件信息获取&#xf…

Flutter入门教程(一),2023最新版包含安装,初始化!简单易懂!

Flutter入门教程&#xff08;一&#xff09;&#xff0c;2023最新版包含安装&#xff0c;初始化&#xff01;简单易懂&#xff01; Flutter介绍 首先&#xff0c;在一切的开始之前我们来介绍一下什么是Flutter&#xff0c;Flutter 是一个由 Google 开发的开源移动应用程序开发…

Openlayers实战:加载静态图片作为底图

我们经常会看到一些商场地图或者其他的静态图展示的情况,在Openlayers实战中,我们加载静态图片,使其成为底图,通过缩放,来展示各个部分。 效果图 源代码 /* * @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN) * @此源代码版权归大剑师兰特所有,可供学习或…

回首2023上半年:成长、思考、感恩

文章目录 每日一句正能量前言一、目标达成情况总结二、工作和学习成果总结三、下半年规划总结四、个人想法 后记附录 每日一句正能量 做一个向日葵族&#xff0c;面对阳光&#xff0c;不自艾自怜&#xff0c;每天活出最灿烂的自己。曾经拥有的&#xff0c;不要忘记。不能得到的…

【JAVA】定时任务之借阅到期自动催还

该篇主要以定时任务为主&#xff0c;通知略为记录 一. 定时任务逻辑代码 定时任务文件 TaskScheduling.java package org.springblade.modules.task;import lombok.extern.slf4j.Slf4j; import org.springblade.modules.archiveAdvantage.service.IArchiveBorrowService; im…

Pytorch基本使用—激活函数

✨1 介绍 ⛄ 1.1 概念 激活函数是神经网络中的一种数学函数&#xff0c;它被应用于神经元的输出&#xff0c;以决定神经元是否应该被激活并传递信号给下一层。常见的激活函数包括Sigmoid函数、ReLU函数、Tanh函数等。 &#x1f384; 1.2 性质 激活函数是神经网络中的一种重…

Markdown基本用法

目录 1 字体倾斜 1.1 加* 1.2 加_ 2 字体加粗 2.1 加** 2.2 加__ 3 字体上带删除线 4 文字变标题 5 超链接 5.1 直接输入地址 5.2 将超链接改成文字 5.2.1 同行写法 5.2.2 不同行写法 6 文字前加 6.1 号 6.2 *号 6.3 -号 7 有序列表 8 …

【微信小程序创作之路】- 小程序常用页面样式

【微信小程序创作之路】- 小程序常用页面样式 第四章 微信小程序用页面样式 文章目录 【微信小程序创作之路】- 小程序常用页面样式前言一、总体样式--全局样式and局部样式1.全局样式2.局部样式 二、Flex布局&#x1f349;&#x1f349;&#x1f349;rpx单位 三、样式导入四、…

HEGERLS四向穿梭车的调度算法如何解决同层多车时车辆路径规划和避让的问题?

纵观全球&#xff0c;消费需求正在发生转变&#xff0c;无论是个体消费还是企业消费&#xff0c;呈现出个性化、定制化、网络化的趋势。因此生产企业面临着产品多样化、订单碎片化、服务定制化的新挑战&#xff0c;仓储密集存储、超大拆零作业量需求愈加明显&#xff0c;且竞争…

苹果平板用不用买原装笔?ipad平替电容笔排行榜

我们应该都知道&#xff0c;第一款ipad早诞生于十年前&#xff0c;如今已是家喻户晓的平板电脑产品。ipad版本系列的更新非常迅速&#xff0c;销售也非常火爆。其中&#xff0c;iPad的配件起到了很大的作用&#xff0c;比如我们今天要介绍的这款电容笔&#xff0c;这款ipad的配…

vue3+ts中常用的两个按钮选择事件写法

1. 效果演示 2.vue3单页面代码演示 <template><div class"btns"><divv-for"(item, index) in nams"click"btnCol(index)":class"current index ? active : btn">{{ item }}</div></div><div clas…

【MySQL】从零开始的JDBC编程

1、JDBC的认识 学了这么久的 MySQL&#xff0c;我们一直采用的都是 MySQL 软件自带的客户端&#xff08;黑框框&#xff09;&#xff0c;来进行跟MySQL服务器进行交互。但是在实际开发中我们很少在黑框框中手动输入SQL&#xff0c;大多数都是通过代码自动执行SQL的。既然大多数…

单片机第一季:零基础4——LED点阵

1&#xff0c;第八章-LED点阵 如何驱动LED点阵&#xff1a; (1)单片机端口直接驱动。要驱动8*8的点阵需要2个IO端口&#xff08;16个IO口&#xff09;、要驱动16*16的点阵需要4个IO端口&#xff08;32个IO口&#xff09;。 (2)使用串转并移位锁存器驱动。要驱动16*16点阵只需要…

7.3Java EE——Bean的实例化

一、构造方法实例化 下面通过一个案例演示Spring容器如何通过构造方法实例化Bean。 &#xff08;1&#xff09;、在IDEA中创建一个名为chapter07的Maven项目&#xff0c;然后在项目的pom.xml文件中配置需使用到的Spring四个基础包和Spring的依赖包。 <dependencies>&…

让白嫖来的阿里云服务器来跑jupyter

文章目录 概要第一步 注册账号并创建实例第二步 连接实例并安装相关软件和依赖包安装python3更新pip安装jupyter生成jupyter配置文件配置之后访问云服务器jupyter的密码修改jupyter配置文件在后台启动jupyter 第三步 访问云服务器上的jupyter结语 概要 按照一般情况&#xff0…

【云原生|Docker系列第2篇】Docker的安装和配置

欢迎来到Docker入门系列的第二篇博客&#xff01;在上一篇博客中&#xff0c;我们已经介绍了Docker的基本概念和作用&#xff0c;以及为什么它成为现代应用开发和部署的关键技术。本篇博客将着重讨论Docker的安装和配置&#xff0c;帮助您开始使用Docker并为您的应用程序提供一…