国际化 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>

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

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

相关文章

智慧城市的创新实践:全球案例分享

一、引言 在全球化和数字化的时代&#xff0c;智慧城市已经成为城市发展的前沿趋势。智慧城市运用先进的信息技术&#xff0c;如大数据、物联网、云计算和人工智能等&#xff0c;提升城市管理的智能化水平&#xff0c;增强公共服务效率&#xff0c;优化居民生活质量。本文将通…

第四十九回 吴学究双掌连环计 宋公明三打祝家庄-Python与HTTP服务交互

吴用请戴宗从梁山请来铁面孔目裴宣、圣手书生萧让、通臂猿侯健、玉臂匠金大坚来帮忙。又告诫扈家庄的扈成&#xff0c;打起来不要去帮祝家庄。 孙立把旗号改成“登州兵马提辖孙立”&#xff0c;来祝家庄找峦廷玉&#xff0c;被热情接待。 第三天&#xff0c;宋江派小李广花荣…

HTML代码简单介绍

目录 HTML结构介绍 HTML文件基本结构 标签的层次结构 HTML结构介绍 HTML的代码由标签构成 例如&#xff1a; <head>Hello</head> 标签名 body 放到 < > 中大部分标签成对出现 <body> 为开始标签, </body> 为结束标签.少数标签只有开始标签…

Qt+FFmpeg+opengl从零制作视频播放器-1.项目介绍

1.简介 学习音视频开发&#xff0c;首先从做一款播放器开始是比较合理的&#xff0c;每一章节&#xff0c;我都会将源码贴在最后&#xff0c;此专栏你将学习到以下内容&#xff1a; 1&#xff09;音视频的解封装、解码&#xff1b; 2&#xff09;Qtopengl如何渲染视频&#…

Docker实战——容器

目录 Docker 容器的基本概念与操作1.使用“docker create”创建容器。这里基于Nginx的镜像创建了一个容器&#xff0c;名字为mycontainer。2.使用“docker ps -a”命令查看所有的容器&#xff0c;这时的容器不一定是运行状态。3.使用 “docker start” 命令可以启动容器。4.使用…

优化zabbix对Docker API的监控

启用Zabbix Agent 2对Docker API的监控&#xff0c;通常不需要直接编辑/etc/zabbix/zabbix_agent2.d/下的文件&#xff0c;因为针对Docker容器的监控是通过内建的插件实现的。以下是大致步骤&#xff1a; 确认Agent版本与配置&#xff1a; 确保你安装的是支持Docker监控的Zabbi…

安卓内存信息查看

目录 前言一、Android查看内存相关信息的方法1.1 通过 adb shell 获取内存信息1.2 通过编程方式获取内存信息1.3 adb shell 获取应用程序内存使用情况1.4 free指令 二、总结 前言 一、Android查看内存相关信息的方法 1.1 通过 adb shell 获取内存信息 C:\Users\henry.xue>…

JMeter正则表达式提取器和JSON提取器基础用法,小白必会!

【面试突击班】1. 性能测试主要关注哪些指标&#xff1f; 最近在利用JMeter做接口自动化测试&#xff0c;正则表达式提取器和JSON提取器用的还挺多&#xff0c;想着分享下&#xff0c;希望对大家的接口自动化测试项目有所启发。 在 JMeter 中&#xff0c;正则表达式和 JSON 提…

代码随想录算法训练营第二十六天 | 39. 组合总和 40.组合总和II 131.分割回文串

39. 组合总和 https://programmercarl.com/0039.%E7%BB%84%E5%90%88%E6%80%BB%E5%92%8C.html class Solution:def combinationSum(self, candidates: List[int], target: int) -> List[List[int]]:result []self.backtracking(candidates, target,0, [], result,0)return…

探索Ubuntu命令行:常见问题与解决方案

一、引言 Ubuntu&#xff0c;作为一款流行的Linux发行版&#xff0c;其命令行界面&#xff08;CLI&#xff09;为用户提供了丰富的功能和灵活性。然而&#xff0c;对于新手来说&#xff0c;命令行可能会带来一些挑战。本文将探讨一些在使用Ubuntu命令行时可能遇到的问题及其解决…

C语言内存优化实用指南

一、引言 在C语言编程中&#xff0c;内存管理是一项至关重要的任务。有效的内存优化可以提升程序的性能&#xff0c;减少资源消耗&#xff0c;并防止可能出现的内存泄漏和溢出问题。以下是一些关于C语言内存优化的实用指南。 二、理解内存管理 在C语言中&#xff0c;程序员需…

VMware虚拟机安装Linux

1.新建虚拟机 2. 安装操作系统 等待 选择中文 点软件选择 选择下面的GNOME桌面 禁用KDUMP 点进安装位置&#xff0c;点完成就可以了 网络连接&#xff0c;右上角打开 开始安装&#xff0c;输入ROOT密码&#xff0c;创建用户 点击重启&#xff0c;等待 重启完成之后出现下面的界…

分巧克力.

题目描述 儿童节那天有K位小朋友到小明家做客。小明拿出了珍藏的巧克力招待小朋友们。 小明一共有块巧克力&#xff0c;其中第块是Hw的方格组成的长方形。为了公平起见 小明需要从这N块巧克力中切出K块巧克力分给小朋友们。切出的巧克力需要满足: 1.形状是正方形&#xff0c;边…

Windows10蓝牙开关按钮不见了问题??

Windows10蓝牙开关按钮不见了问题&#xff1f;&#xff1f;此类问题一般是系统更新不及时的bug&#xff0c;遗漏掉了蓝牙相关驱动插件 试过很多方法&#xff0c;直接下载一个驱动人生即可&#xff0c;主要通过官网下载 下载这个就行 打开软件自动扫描就可以了 最后查看结果

python二级常见题目

一.常见语法 jieba—第三方中文分词函数库 jieba—第三方中文分词函数库_jieba库函数-CSDN博客 Python基础——format格式化 Python基础——format格式化_python format-CSDN博客 format()方法的使用超全_format方法-CSDN博客 Python中random函数用法整理 Python中random…

C#面:什么是虚方法?它与接口有什么不同?

虚方法&#xff1a; 虚方法是在基类中声明的方法&#xff0c;可以在派生类中进行重写。通过使用关键字"virtual"来标记虚方法。派生类可以根据需要重新实现该方法。 虚方法和接口的主要区别在于&#xff1a; 虚方法是在基类中定义的&#xff0c;派生类可以选择性地…

web安全学习笔记【19】——信息打点(9)

信息打点-红蓝队自动化项目&资产侦察&武器库部署&企查产权&网络空间[1] #知识点&#xff1a; 1、业务资产-应用类型分类 2、Web单域名获取-接口查询 3、Web子域名获取-解析枚举 4、Web架构资产-平台指纹识别 ------------------------------------ 1、开源-CM…

【Web】关于FastJson反序列化开始前的那些前置知识

目录 FastJson介绍 FJ序列化与反序列化方法 关于反序列化三种方式的关系与区别 FastJson反序列化漏洞原理通识 关于getter&setter FastJson介绍 FastJson&#xff08;快速JSON&#xff09;是一个Java语言编写的高性能、功能丰富且易于使用的JSON解析和序列化库。它由…

python梅花易数,python算卦

2024-02-28 python梅花易数&#xff0c;python算卦&#xff0c;梅花易数的三数起卦 前言&#xff1a;本来想搜来直接复制的&#xff0c;结果看目前找到的都有些问题&#xff0c;特意去看了梅花易数的视频&#xff0c;写了个。想法被拿捏的死死的&#xff0c;不如相信算卦 # …

在docker中玩flink时候记录一些组合命令

前言 玩docker的时候记录一些组合命令&#xff0c;一方面是可以直接拿上来使用&#xff0c;还有的话也可以拿过来改改&#xff0c;主要是我自己有这种经历&#xff0c;过一阵子我自己也忘&#xff0c;与其去搜人家的博客还不如自己记录一把。好了&#xff0c;没啥所谓的规律性…