Vue3实现中英文切换

1、安装插件：cnpm install vue-i18n --save

2、新建language文件夹，新建index.js和en.js和zh.js文件

3、en.js文件内容示例：

export default {meg: {username: 'username',email:'email'}
}

zh.js代码示例：

export default {meg: {username: '姓名',email:'邮箱'}
}

index.js文件示例：

import { createI18n } from 'vue-i18n'; //引入vue-i18n组件
import zh from './zh';
import en from './en';
//注册i18n实例并引入语言文件
const i18n = createI18n({legacy:false,locale: 'en', // 语言标识（缓存里面没有就用中文）fallbackLocale:'en' , //没有英文的时候默认中文语言messages: {zh,en}
});
export default i18n

4、在main.js中引入并使用：

import  i18n  from './components/language/index.js'createApp(App).use(vant,Button).use(i18n).use(router).use(ElementPlus).mount('#app')

5、在组件中使用，并修改语言：

<template><div class="langpage"><h1>中英文切换</h1><button @click="changelang">切换语言</button><div>{{$t('meg.username')}}</div></div>
</template><script setup>
import  {useI18n } from 'vue-i18n';const i18n = useI18n()
console.log(i18n);function changelang(){i18n.locale.value=='zh'?i18n.locale.value='en':i18n.locale.value='zh'
}</script><style lang="less" scoped>
</style>

Vue3实现中英文切换相关推荐

vue2项目使用i18n进行中英文切换
vue+element 使用i18n进行中英文切换文章目录前言一.下载vue-i18n插件二.定义中英文两套js文件,配置i18n,并在main.js中引入三.通过点击事件切换语言四.i1 ...
ae中英文切换_AE技巧，AE CC软件如何切换中英文版
平时使用,中文界面更容易操作,但有时候需要切换成英文版使用,那AE怎么切换中英文界面呢?今天就来跟大家讲解一下切换语言界面的方法. 中文界面固然看着熟悉,对于入门来说也是非常有利的.但是,我们在学习过 ...
jenkins页面中英文切换配置
jenkins中英文切换配置 Jenkins--英文切换成中文更新了一下jenkins的war包, 结果启动后成英文的了,后来百度出解决方案: 原文地址:https://blog.csdn.net/ ...
SpringBoot中英文切换/国际化——java后端怎么用预置文本的内容替换web网页内容（Resource Bundle）
文章目录创建预置文件文本内容 Thymeleaf修改前端使其获得预置文本内容 html页面设置跳转标签和传值创建一个MyLocaleResolver配置文件在MvcConfiguration中注 ...
中英文切换_王者荣耀：模拟战奖励一览，新增中英文切换，李白第二套星元来袭...
王者荣耀体验服在今日凌晨更新后新增了不少功能,比如模拟战加入了精灵机制,以及局内新增语言设置,另外李白继千年之狐后,又有一套皮肤加入"星计划",即李白团战精神皮肤敏锐之力将迎来星元 ...
网站 html 中英文切换 - API 总结篇
网站 html 中英文切换 - API 总结篇引言: 项目要求实现中英文等国际化语言切换,实现的方法多种多样,这里简单总结一下部分方法的优缺点. 基本上都是:使用第三方API接口或者自定义编写中 ...
xadmin在Django 1.11中的使用及中英文切换
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com xadmin是一个强大的替代django admin的管理后台,github地址为:https://g ...
struts2的国际化（即实现网站整体中英文切换）实例
推荐一个专注于Java的小众技术社区:Java之音环境要求:Struts2框架环境搭建成功为了实现程序的国际化,必须先提供程序所需要的资源文件.资源文件的内容基本是key-value对,其中key ...
ThinkPHP3.2.3 语言包切换中英文切换
今天要用ThinkPHP3.2.3做一个小网站,其中涉及到切换中文与英文,通过查询手册和百度实现了该操作,现在将我具体的操作步骤记录下来,作为笔记和大家分享. php开发框架:ThinkPHP3.2. ...

Vue3实现中英文切换

Vue3实现中英文切换相关推荐

最新文章

热门文章