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

国际化 Vue-i18n的安装与使用 (Vue2.0 / Vue3.0)

国际化 Vue-i18n的安装与使用 (Vue2.0 / Vue3.0)
一、Vue-i18n是什么?
Vue-I18n是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。简单来说就是可以帮助用户进行语言的切换”

二、使用步骤
1.引入库
代码如下(示例):

//npm 
npm install vue-i18n --save-dev//yarn
yarn add vue-i18n

2.在locales文件夹创建 en.json / zh.json

//en.json
{"up":"up","chooseVariants":"Choose Variants","Specifications":"Product Specifications"
}//zh.json
{"up":"起","chooseVariants":"请选择产品规格","Specifications":"产品规格",
}

3.在locales文件夹创建 index.js

import {createI18n} from 'vue-i18n';import en from './en.json'
import zh from './zh.json'//const locale = 'zh'
let locale = 'zh'
const messages = {'en': en,'zh': zh
}
if(localStorage.getItem('lang')){locale =  localStorage.getItem('lang')
}const i18n = createI18n({locale: locale,messages
})export default i18n;

4.创建 store.js

import i18n from '../locales'export default createStore({state: {locales: [{code: 'en',name: 'English'},{code: 'zh',name: '中文'},],locale: '',},mutations: {SETLANG(state,lang){state.locale= langlocalStorage.setItem('lang', lang);i18n.global.locale = lang}},actions: {},modules: {},getters: {}
})

5.使用方法

{{ $t(“chooseVariants”) }}

6.语言切换示例

<template><div class="language" @click.stop><div class="language-div hor-center slgap" @click="langed = !langed"><img class="world" src="@/assets/common/world.svg" alt="" /><div class="body1" :class="{ 'body-langed': langed }">{{ $t("languages") }}</div><imgsrc="@/assets/common/chevronDown.svg"class="language-img":class="{ 'img-rotate': langed }"/></div><div class="language-box col" :class="{ 'language-hidden': !langed }"><divclass="language-label flex"v-for="(lang, i) in locales":key="i"@click="switchLang(lang.code)">{{ lang.name }}</div></div></div>
</template>//Vue2.0
<script>
export default {head() {return {htmlAttrs: {lang: this.$store.state.locale,},};},name: "SwitchLang",data() {return {langed: false,};},methods: {switchLanguage(localeCode) {document.cookie = `locale=${localeCode}`;location.reload();},},computed: {locales() {return this.$store.state.locales;},locale() {return this.$store.state.locale;},},created() {// PubSubs.PubSub.subscribe("closeComps", () => {//   this.langed = false;// });},
};
</script>//Vue3.0
<script setup>
import { useStore } from "vuex";
const store = useStore();
function switchLang(lang) {location.reload();store.commit("SETLANG", lang);
}
</script>
<style scoped>
</style>

相关文章:

国际化 Vue-i18n的安装与使用 (Vue2.0 / Vue3.0)

国际化 Vue-i18n的安装与使用 &#xff08;Vue2.0 / Vue3.0&#xff09; 一、Vue-i18n是什么&#xff1f; Vue-I18n是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。简单来说就是可以帮助用户进行语言的切换” 二、使用步骤 1.引入库 代码…...

Linux 学习笔记(8)

八、 启动引导 1 、 Linux 的启动流程 1) BIOS 自检 2) 启动 GRUB/LILO 3) 运行 Linux kernel 并检测硬件 4) 挂载根文件系统 5) 运行 Linux 系统的第一个进程 init( 其 PID 永远为 1 &#xff0c;是所有其它进程的父进程 ) 6) init 读取系统引导配置文件…...

【python】1.python3.12.2和pycharm社区版的安装指南

欢迎来CILMY23的博客喔&#xff0c;本篇为【python】1.python3.12.2和pycharm社区版的安装指南&#xff0c;感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 目录 一、python3.12.2的下载与安装 1.1下载 1.2安装 二、pycharm的安装 2.1下载安装 2…...

Ubuntu将c++编译成.so文件并测试

一、准备cpp和h文件 创建test.cpp 在cpp中定义相加的函数funcAdd&#xff0c;给出函数的细节代码 #include <iostream> using namespace std;int funcAdd(int x, int y) {return xy; }创建test.h 在h中声明定义的函数&#xff0c;不需要任何细节 #ifndef __TEST__ #…...

数据分析-Pandas数据的探查面积图

数据分析-Pandas数据的探查面积图 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表&…...

美团分布式 ID 框架 Leaf 介绍和使用

一、Leaf 在当今日益数字化的世界里&#xff0c;软件系统的开发已经成为了几乎所有行业的核心。然而&#xff0c;随着应用程序的规模不断扩大&#xff0c;以及对性能和可扩展性的需求不断增加&#xff0c;传统的软件架构和设计模式也在不断地面临挑战。其中一个主要挑战就是如…...

Ubuntu20.04: UE4.27 中 Source Code 的编辑器下拉框没有 Rider选项

问题描述 最近想用 Rider 作为 UE4 开发的 IDE&#xff0c;但安装好 Rider 后&#xff0c;发现编辑器下拉框中没有 Rider 的选项&#xff0c;我检查了 UE4 的插件&#xff0c;发现 Rider Integration 插件已经安装且启用的。 环境&#xff1a;Ubuntu 20.04 UE4.27 Rider2023…...

【论文阅读-PRIVGUARD】Day4:3节

3 PRIVANALYZER&#xff1a;强制执行隐私政策的静态分析 本节介绍PRIVANALYZER&#xff0c;这是一个用于强制执行由PRIVGUARD追踪的隐私政策的静态分析器**。我们首先回顾LEGALEASE政策语言&#xff0c;我们使用它来正式编码政策&#xff0c;然后描述如何静态地强制执行它们**…...

新一代电话机器人开源PHP源代码

使用easyswoole 框架开发的 新一代电话机器人开源PHP源码 项目地址&#xff1a;https://gitee.com/ddrjcode/robotphp 代理商页面演示地址 http://119.23.229.15:8080 用户名&#xff1a;c0508 密码&#xff1a;123456 包含 AI外呼管理&#xff0c;话术管理&#xff0c;CR…...

dockerdocker-copose_限制容器cpu和内存

本文目录 docker的限制方式限制CPU占用限制内存占用 docker-compose docker的限制方式 限制CPU占用 Docker使用--cpus参数来限制容器的CPU资源。该参数指定了分配给容器的CPU核心数量或百分比。 例子&#xff1a;限制CPU使用个数 docker run --cpus2 <imageName>以上…...

【leetcode】圆圈中最后剩下的数字

目录 1. 问题 2. 思路 3. 代码 4. 运行 1. 问题 本题即为典型的约瑟夫问题&#xff0c;通过递推公式倒推出问题的解。原始问题是从n个人中每隔m个数踢出一个人&#xff0c;原始问题变成从n-1个人中每隔m个数踢出一个人…… 示例 1&#xff1a; 输入: n 5, m 3 输出: 3…...

利用python批量将.shp文件转换坐标生成.geojson文件,再将.geojson转换成.csv文件,最后将csv文件插入数据库表

第一步&#xff1a;.shp批量转.geojson # author: JMY # 创建时间: 2024/2/26 17:12 # 批量将.shp文件生成geojson文件并转换坐标为3857import os import geopandas as gpd# 定义输入和输出文件夹路径 input_folder shp文件 output_folder geojson文件# 定义输入和输出坐标系…...

远程服务器Ubuntu 18.04安装VNC远程桌面

一、安装vnc 1.安装图形化界面工具 # 安装过程中会弹窗让选择配置&#xff0c;选lightdm sudo apt install ubuntu-desktop sudo apt-get install gnome-panel gnome-settings-daemon metacity nautilus gnome-terminal 2.安装vnc sudo apt-get install x11vnc3.安装LightD…...

30天自制操作系统(第23天)

23.1 编写malloc 参考第22天的内容&#xff0c;在绘制窗口前先分配了150*50个字节大小的内存&#xff0c;所以导致该文件经编译后有7.6k左右&#xff0c;能否在其中使用指针呢&#xff1f;当需要开辟空间时&#xff0c;移动指针即可。在之前的章节中也有函数memman_alloc函数可…...

基于Rust语言,和WebAssembly技术,与JavaScript结合,的具体应用场景

基于Rust语言与WebAssembly&#xff08;Wasm&#xff09;技术并与JavaScript结合&#xff0c;可以应用于多个场景&#xff0c;特别是在需要高性能和/或低级系统访问的情况下。下面是一些具体的应用场景&#xff1a; 性能密集型任务: Rust加上Wasm适合执行计算密集型任务&#x…...

【MATLAB源码-第154期】基于matlab的OFDM系统多径信道下块状和梳妆两种导频插入方式误码率对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 OFDM&#xff08;Orthogonal Frequency Division Multiplexing&#xff0c;正交频分复用&#xff09;是一种高效的无线信号传输技术&#xff0c;广泛应用于现代通信系统&#xff0c;如Wi-Fi、LTE和5G。OFDM通过将宽带信道划分…...

Linux 下 socket 编程介绍及 TCP 客户端与服务端创建示例

目录 socket 编程接口TCP 服务端TCP 客户端更多内容 本文介绍了 Linux 下的 socket 编程&#xff0c;及总结了使用 socket 接口实现 TCP 服务端和客户端的示例代码。 socket 编程接口 socket() 函数&#xff1a;用于创建一个新的 socket 描述符&#xff1a; int socket(int …...

JetBrains Gateway Github Copilot 客户端插件和主机插件

JetBrains Gateway可以通过插件支持Github Copilot&#xff08;需另行注册&#xff09;。 需要安装插件 客户端&#xff0c;而非插件 主机&#xff0c;如图所示&#xff1a; 大概是因为代码显示在客户端&#xff08;运行在本地的IDE&#xff09;&#xff1f;...

【web APIs】3、(学习笔记)有案例!

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、概念其他事件页面加载事件元素滚动事件页面尺寸事件 元素尺寸与位置 二、案例举例电梯导航 前言 掌握阻止事件冒泡的方法理解事件委托的实现原理 一、概念…...

使用css reset 还是使用Normalize.css

文章目录 使用css reset 还是使用Normalize.cssCSS Reset:Normalize.css:总结Normalize.css 的使用&#xff08;例如Vue 3.0 和 Vue CLI 4.x 项目&#xff09;1.安装2.main.js 中导入3.测试引用是否成功。 使用css reset 还是使用Normalize.css 使用 CSS Reset 还是 Normalize…...

喜欢搞技术的高技术、喜欢搞业务的搞业务

AI Flow Studio - 智能体编排平台> &#x1f525; 2026年最热门的AI Agent编排平台 - 可视化流程设计、多模型集成、企业级管理项目概述AI Flow Studio 是一个现代化的 AI Agent 智能体编排与管理系统&#xff0c;提供可视化流程设计、多模态 AI 模型集成、企业级监控管理等…...

天尊传奇「剑神密藏」全攻略

核心玩法&#xff1a;消耗灵符 / 剑神密钥抽奖&#xff0c;享高倍加成&#xff0c;可 100 连抽&#xff0c;目标拿飞剑、神装等稀缺战力资源天尊传奇。一、核心规则与折扣消耗&#xff1a;灵符或剑神密钥&#xff08;密钥可通过活动 / 商城获取&#xff0c;优先用密钥保底&…...

WebPShop:Photoshop WebP插件终极指南 - 如何完美处理现代图像格式

WebPShop&#xff1a;Photoshop WebP插件终极指南 - 如何完美处理现代图像格式 【免费下载链接】WebPShop Photoshop plug-in for opening and saving WebP images 项目地址: https://gitcode.com/gh_mirrors/we/WebPShop WebPShop是Photoshop的专业WebP插件&#xff0c…...

SpaceClaim 流体域建模实战:从零到一构建CFD仿真几何

1. SpaceClaim流体域建模基础概念 第一次接触CFD仿真时&#xff0c;我完全被复杂的几何建模难住了。直到发现SpaceClaim这个神器&#xff0c;才明白原来流体域建模可以如此直观高效。SpaceClaim作为ANSYS旗下的直接建模工具&#xff0c;彻底改变了传统参数化建模的繁琐流程&am…...

Honey Select 2游戏体验终极优化指南:HS2-HF_Patch完整解决方案

Honey Select 2游戏体验终极优化指南&#xff1a;HS2-HF_Patch完整解决方案 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 当你打开Honey Select 2时&#xff…...

终极指南:3步学会使用Akebi-GC游戏辅助工具提升原神体验

终极指南&#xff1a;3步学会使用Akebi-GC游戏辅助工具提升原神体验 【免费下载链接】Akebi-GC (Fork) The great software for some game that exploiting anime girls (and boys). 项目地址: https://gitcode.com/gh_mirrors/ak/Akebi-GC 还在为《原神》中繁琐的神瞳收…...

六自由度系统弱、强非线性振动参数辨识研究(Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

如何用3个步骤轻松下载B站视频:BBDown_GUI完全指南

如何用3个步骤轻松下载B站视频&#xff1a;BBDown_GUI完全指南 【免费下载链接】BBDown_GUI BBDown的图形化版本 项目地址: https://gitcode.com/gh_mirrors/bb/BBDown_GUI 还在为复杂的命令行工具而烦恼吗&#xff1f;BBDown_GUI让你告别代码恐惧&#xff0c;用最简单的…...

告别代码复制:用GD32F3x0固件库V2.2.0优雅配置PWM互补输出(Keil MDK环境)

告别代码复制&#xff1a;用GD32F3x0固件库V2.2.0优雅配置PWM互补输出&#xff08;Keil MDK环境&#xff09; 在嵌入式开发中&#xff0c;PWM&#xff08;脉冲宽度调制&#xff09;技术广泛应用于电机控制、电源管理等领域。对于GD32F3x0系列微控制器&#xff0c;官方提供的固件…...

Meta亿元天团首个大模型交卷!余家辉宋飏Jason Wei耗时九个月,一雪Llama前耻

一水 发自 凹非寺量子位 | 公众号 QbitAI再见了&#xff0c;所有的羊驼。亚历山大王带队9个月从零重构Meta所有AI技术栈&#xff0c;在不断的质疑中交出超级智能实验室第一个模型&#xff1a;主打原生多模态的Muse Spark。模型发布后&#xff0c;Meta股价火速拉升约7%&#xff…...