首页 > 其他分享 >Vue3 实现国际化

Vue3 实现国际化

时间:2024-07-28 15:27:12浏览次数:16  
标签:vue const 实现 msg 国际化 Vue3 i18n import

什么是前端国际化?

国际化是做框架,帮助快速实施本地化。框架的设计实现决定了进行本地化的效率与质量。那什么是本地化?本地化就是在特定语言文化下,使产品能服务当地客户的使用习惯,总的来说,就是为一个系统提供不同语言的切换。

国际化实现原理

我们需要提供不同语言的资源包 比如我们有一个变量msg,我们需要根据当前选择语言,切换msg取值。
1、你好世界
2、hello world

<script>
	 // 1、定义 msg 的值的数据源
	 const message = {
	     en:{
	         msg:'hello World'
	     },
	     zh:{
	         msg:'你好世界'
	     }
	 }
	 // 2、定义切换变量
	 let local = 'zh'
	
	 // 3、定义赋值函数
	 function t(key){
	     return message[local][key]
	 }
	
	 // 4、为 msg 赋值
	 let msg = t('msg')
	 console.log(msg)
</script>

实际工作中,我们并不会自己去封装一个国际化的函数,而是使用i18n插件,实现Vue项目的国际化。

vue 项目的国际化

在 vue3 的项目中,我们使用 vue-i18n@next 进行国际化功能的实现。

vue-i8 的使用可以分为四个部分:
1、创建 messages 数据源
2、创建 locale 语言变量
3、初始化 i18n 实例
4、注册 i18n 实例

安装 vue-i18n

 npm install vue-i18n@next

配置 i18n 项目文件

1、创建配置文件 /i18/index.js

import { createI18n } from 'vue-i18n'

// 设置语言资源包
const messages = {
    en:{
        msg:{
            test:'hello world'
        }
    },
    zh:{
        msg:{
            test:'你好世界'
        }
    }
}

// 设置语言
const locale = 'en'

let i18n = createI18n({
    // 使用 composition API
    legacy:false,
    // 全局使用 t 函数
    globalInjection:true,
    locale,
    messages
})

export default i18n

2、i18n 引入 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from '@/i18n'

createApp(App).use(store).use(router).use(i18n).mount('#app')

3、页面使用 t 函数

<template>
  <div class="about">
    <h1>{{ $t('msg.test') }}</h1>
  </div>
</template>

代码实现效果
4、触发事件,进行语言切换

<template>
  <div class="about">
    <h1>{{ $t('msg.test') }}</h1>
  </div>
  <button @click="changeLanguage('zh')">中文</button>
  <button @click="changeLanguage('en')">英文</button>
</template>
<script setup>
import { useI18n } from 'vue-i18n'

const i18n = useI18n()
const changeLanguage = (code) => {
  i18n.locale.value = code
}
</script>

在这里插入图片描述

谢谢观看

标签:vue,const,实现,msg,国际化,Vue3,i18n,import
From: https://blog.csdn.net/weixin_37133641/article/details/140750403

相关文章

  • 2_2_动态分配的顺序表实现
    #include<stdio.h>#include<stdlib.h>#include<stdbool.h>#defineInitSize5//默认的最大长度//#defineIncreaseSize5//每次改变的步长typedefstruct{ int*data;//指示动态分配数组的指针 intMaxSize; //顺序表的最大容量intlength;//......
  • JUC并发编程:基于Condition实现一个阻塞队列
    Condition方法概述await():当前线程进入等待状态,直到被通知(siginal)或中断【和wait方法语义相同】。awaitUninterruptibly():当前线程进入等待状态,直到被通知,对中断不敏感。awaitNanos(longtimeout):当前线程进入等待状态直到被通知(siginal),中断或超时。awaitUnit......
  • 实现畅捷通T+19.0基础资料与单据的互传
    功能:自动下载基础资料商品、供应商、客户、部门、自定义字段、仓库信息到地磅软件,供软件新增单据使用;地磅软件数据流程走完,自动上传采购与销售单据到畅捷通;注意点:用友所有产品的接口都在云上,无论是私有云还是公有云产品,都需要在云上注册开发者创建应用对接,必须提供一个公网可访问......
  • JAVA 实现 - 哈希表
    哈希算法String.hashCodepublicstaticvoidmain(String[]args){Stringstr1="abc";Stringstr2="bca";inthash=0;for(inti=0;i<str2.length();i++){charc=str1.charAt(i);System.out.pr......
  • Nginx 如何实现请求的缓存过期策略?
    ......
  • 如何利用PyQt实现列表添加删除排序功能?
    本文介绍如何实现列表增加删除和排序的功能,效果如下:1页面设计1.1列表#列表数据 self.list=['福宝','萌兰','金虎','蓝天']#创建四行一列标准数据模型self.mode=QStandardItemModel(4,1)#将数据中的列表项作为标准数据模型输出......
  • 如何使用Redis实现一个缓存策略
    使用Redis实现一个缓存策略,主要涉及到数据的存储、读取、更新以及失效处理等方面。下面我将详细介绍如何使用Redis来设计和实现一个基本的缓存策略。1.确定缓存的数据结构和键命名规则首先,你需要决定使用Redis中的哪种数据结构来存储缓存数据,比如字符串(String)、哈希(Hash)、列......
  • Modelsim仿真实现Verilog HDL频率检测器
     检测输入信号的频率,输出8位数码显示,十进制。可以用于八段式数码管显示屏。1clk产生1Hz的方波,这是个很低的频率,被检测的频率都比这个高,因此,1个周期(即1s)内,可以有很多很多个signal的上升沿,只需要统计signal上升沿的数量,就可以算出signal的频率。在clk第1个上升沿发生后,令......
  • 在 FastAPI + JWT 身份验证中如何最好地实现 is_active ?
    我的用户模型有一个字段is_active。如果为假,则说明该用户的账户被封锁。在这种情况下如何实施访问限制?我应该拒绝用户访问某些端点吗?执行此检查的最佳地点在哪里?如果is_active=False,它是否应该在get_current_user依赖项中?我的依赖项函数get_current_userasyncdefg......
  • 模块3 面向对象编程高级 --- 第十章:实现多态
    第十章实现多态主要知识点1、多态的定义2、实现多态的条件学习目标理解多态的含义,掌握多态的使用方法,所谓多态:多种状态。在面向对象语言中,接口中定义的抽象方法的多种不同实现方式即多态。10.1创建多态的条件10.1.1多态的定义首先多态的作用是什么呢?......