中英文切换,vue项目国际化使用教程(国际化使用详细,i18n国际化)

news2024/11/15 7:08:48

简述:在工作中,我们难免会遇到把文字切换成外语的需求,这里来记录下如何在项目中点击切换成英语,这里会用到i18n,它是一个支持国际化功能的插件,这里来分享下它的使用过程。

1、首先,我们需要在项目中执行此命令,下载安装相关依赖。

npm install vue-i18n

2、创建语言包文件,langue 文件夹,在该文件夹下再分别创建与默认语言与翻译语言的文件,例如zh.js和en.js,在文件中写入你需要展示和翻译的文本,然后导出,最后在新建一个i18n.js文件引入zh.js和en.js文件,这样的话总体结构比较清晰明了,像下面这样 。

zh.js:

export default {
  demo1: {
    welcome: "你好,世界",
  },
  demo2: {
    name1: "托尼",
    name2: "杰克",
  },
}

  en.js:

export default {
  demo1: {
    welcome: "Hello,world!"
  },
  demo2: {
    name1: "toni",
    name2: "jack",
  },
}

 在i18n.js文件中引入需要用到的文件,并处理数据后导出;

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

import zhLocale from "./zh";
import enLocale from "./en";


const messages = {
  zh: {
    ...zhLocale,
  },
  en: {
    ...enLocale
  }
}

const i18n = new VueI18n({
  locale: "zh",
  messages
})

export default i18n;

3、在main.js中引入挂载使用;

import i18n from "../src/langue/i18n.js"
console.log(i18n);

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

控制台输出i18n,VueI18n打印成功:

4、具体使用

通过  {{$t('')}}  和  v-text="$t('')"  展示文本:

<div>{{$t('demo1.welcome')}}</div>

<div v-text="$t('demo1.welcome')"></div>

                通过  this.$i18n.locale  来修改语言显示状态,当你赋值为‘zh’时,就变成中文,

当赋值为 ‘en’时,就变成英文:

 // 点击事件
choseLanguage() {
      
      const res = this.$i18n.locale;
      this.$i18n.locale = res == 'zh' ? res = 'en' : res = 'zh';

}

          this.$i18n.locale用于获取当前语言环境的值,也可以被用于动态地改变语言环境。你可以将它的值更改为另一个支持的语言代码,从而切换到该语言环境。例如:this.$i18n.locale = 'fr'将把应用程序的语言环境更改为法语。

5、最终效果 

tips: 当然,如果数据两较少的话,可以直接在main.js中引入后,配置使用,使用方式同样:

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    en: {
      loginTxt: "login",
      change: 'change'
    },
    zh: {
      loginTxt: '登录',
      change: '切换'
    }
  }
})

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

更多,详见>>

Vue I18n官方网站https://kazupon.github.io/vue-i18n/zh/installation.html#%E5%85%BC%E5%AE%B9%E6%80%A7%E8%AF%B4%E6%98%8E

感觉有用,就一键三连,感谢(●'◡'●)

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

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

相关文章

idea使用 ( 四 ) 插件

5.插件 5.1.idea数据库连接 5.1.1.打开配置界面 5.1.2.选择MySQL 点击 号 > Data Source > MySQL 5.1.3.配置数据库驱动jar 先在左边选择 MySQL 再点击 号 > Custom JARs… 在 弹出的窗口中选择 已经存在的 jar位置 就导入 MySQL 的驱动文件 5.1.4.配置连库…

记录一次在x86 软件中使用dpdk 的历程(Makefile gcc改成g++)

我们一台服务器上原本是用grub下预留内存的方式, 然后把物理地址在板卡上的配置文件中传给L1. 但是在客户的环境上服务器windriver上不是能预留内存的. 所以服务器上需要在testMxx程序中用dpdk的方式分配出内存, 然后, 把物理地址通过sdp虚拟的网口&#xff0c; 用socket 传…

为什么要清除浮动?清除浮动的方式

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;HTMLCSS &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; 文章目录 浮动的定义浮动的工作原理浮动的特性为什么要清除浮动清除浮动的方式利用clear样式…

vue3 vite typescript volar element-plus element标签报红问题的解决

故障就这样的&#xff1a; 模块 ""element-plus"" 没有导出的成员 "FormInstance" 至于原因咱也不知道&#xff0c;也没搞明白&#xff0c;一直以为是volar校验的问题&#xff0c;能开发咱就接着干&#xff0c;到了发布的时候傻眼了。所有这种…

API低代码平台介绍1-功能概述

API低代码平台之ADI平台 ADI平台是指Application data integration&#xff0c;即“应用数据集成”&#xff0c;使用springboot开发&#xff0c;并通过springcloud实现微服务&#xff0c;是一个动态定义Http API接口的“零代码”或“低代码”平台&#xff0c;支持GET(查)、POST…

Java 实现 YoloV7 人体姿态识别

1 OpenCV 环境的准备 这个项目中需要用到 opencv 进行图片的读取与处理操作&#xff0c;因此我们需要先配置一下 opencv 在 java 中运行的配置。 首先前往 opencv 官网下载 opencv-4.6 &#xff1a;点此下载&#xff1b;下载好后仅选择路径后即可完成安装。 此时将 opencv\b…

30基于非对称纳什谈判的多微网电能共享运行优化策略MATLAB程序

资源地址&#xff1a; 30基于非对称纳什谈判的多微网电能共享运行优化策略MATLAB程序资源-CSDN文库 参考文献&#xff1a; 《基于非对称纳什谈判的多微网电能共享运行优化策略》——吴锦领 仿真平台&#xff1a;MATLAB CPLEXMOSEK/IPOPT 主要内容&#xff1a; 主要做的是…

优思学院|精益生产为企业带来革命性转变的效益

企业的成长和发展需要不断的变革和创新&#xff0c;而精益生产则成为了这个时代的代名词。精益生产不仅仅是一个生产方式&#xff0c;更是一种革命性的转变&#xff0c;为企业带来了无限的效益。 什么是精益生产&#xff1f; 精益生产是一种基于持续改进的生产方式&#xff0…

基于matlab的混合波束成形仿真

一、前言 本示例介绍了混合波束成形的基本概念&#xff0c;并展示了如何仿真此类系统。 二、介绍 现代无线通信系统使用空间复用来提高散射体丰富的环境中系统内的数据吞吐量。为了通过通道发送多个数据流&#xff0c;从通道矩阵中导出一组预编码和组合权重。然后&#xff0c;可…

lammps教程:聚合物压缩,避免“bond atoms missing”

本文介绍聚合物的压缩方法。 lammps模拟聚合物体系时&#xff0c;最常见的一个错误是“bond atoms missing”,其中一个原因是建模方法不对。 这个原理在之前的专栏文章中已经详细介绍。 如果使用ms建模&#xff0c;聚合物的链会伸出到盒子外面&#xff0c;在导出data文件后&…

MindFusion.Diagramming for WinForms 6.8.6

您现在可以指定在修改项目时要显示的视觉效果。 2023 年 4 月 26 日 - 15:55新版本 特征 您现在可以指定在修改项目时要显示的视觉效果。新的 Opacity 属性允许您创建半透明的 DiagramItem。添加了新的 CopySelection 重载&#xff0c;它允许您复制项目列表而无需选择它们。您现…

OrbStack

OrbStack 是一个可以在 macOS 上快速运行 Docker 容器&#xff0c;和 Linux 虚拟机的工具&#xff0c;资源占用率低&#xff0c;高效&#xff0c;快速。 macOS 上的 Parallels Desktop 和 Docker Desktop 一直是饱受诟病&#xff0c;慢、重、资源消耗巨大。OrbStack 的出现就是…

goroutine和channel

进程与线程 进程就是程序执行在操作系统中的一次在执行过程&#xff0c;是系统进行资源分配的基本单位。 线程就是进程的一个执行实例&#xff0c;是程序的最小执行单元&#xff0c;是比进程更小的独立运行的单位。 一个进程可以创建多个线程&#xff0c;同一一个进程中的多…

如何在C中动态分配二维数组

在C语言中如何动态申请连续的二维数组。可以采用多申请一些指针&#xff0c;然后这一些指针分别指向后面数据区中对应的位置&#xff0c;如一个3*4的int类型数组&#xff0c;我们先申请大小为sizeof(int*) * 3 3 * 4 * sizeof(int)的一维数组设为arr。然后arr[0]存放指向arr …

OpenAirInterface通过docker build方式构建images

本文主要讲解如何通过build方式构建各个网元的image&#xff0c;因为直接pull的image无法对其进行更改&#xff0c;而build的镜像可以对其源代码进行编辑更改后生成镜像。 参考链接&#xff1a;OAI build iamges 1.获取正确的网络功能分支 此存储库仅包含教程和持续集成脚本…

有假币与求正数数组的最小不可组成和

一、编程题 1.有假币 链接&#xff1a;有假币__牛客网 (nowcoder.com) 居然有假币&#xff01; 现在猪肉涨了&#xff0c;但是农民的工资却不见涨啊&#xff0c;没钱怎么买猪肉啊。nowcoder这就去买猪肉&#xff0c;结果找来的零钱中有假币&#xff01;&#xff01;&#xff…

爪哇项目maven项目的打包方式

大家好 ~ 前言 现在都是使用idea中maven插件来打包项目&#xff0c;出现了很多问题很多类或者方法、依赖没有打入到包中&#xff0c;发生了很多问题&#xff0c;因此此文章将基于idea中的maven插件打包。 概念 打包分为小包和大包两种概念&#xff1a; 小包&#xff1a;只打…

Conda虚拟环境的复制和迁移

Conda虚拟环境的复制和迁移 在本机复制Conda虚拟环境 conda create --name snapshot --clone myenv相同操作系统之间复制环境 方法一&#xff1a;requirements.txt 这个方法不推荐&#xff0c;因为只会导出你使用pip安装的依赖包&#xff0c;不会导出虚拟环境所依赖的包&am…

SQL应用题分析

SQL应用题的一般考点&#xff1a; 基本表的查询&#xff08;单表、多表、嵌入、分组、排序&#xff09;、向表中插入数据、更新数据、建立视图 关系代数替换sql&#xff0c;使用关系代数来进行查询 基本上就这几点 SQL基本表的插入、更新和建立视图都是死板的&#xff0c;只…

前端开发:CSS中@import指令详解

前言 在前端开发过程中&#xff0c;关于CSS的使用也是非常的&#xff0c;尤其是样式相关的设置等操作。作为前端开发者关于import指令都会有所了解&#xff0c;尤其是在导入CSS样式的时候会用到&#xff0c;但是刚入行不久的前端开发者对应import指令会有所陌生。那么本文就来分…