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

Vue3+Ts i18n实现国际化

时间:2024-04-30 10:00:42浏览次数:26  
标签:index success title Ts ts result Vue3 i18n

1、下载 依赖

npm install vue-i18n@nex

2、在src目录下创建文件夹 创建文件 index.ts 、 zh/index.ts 、en/index.ts 

// index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh/index'
import en from './en/index'

const messages = {
en,
zh,
}

console.log('localStorage.getItem', localStorage.getItem('language'));

const language = (navigator.language || 'en').toLocaleLowerCase() // 获取浏览器的语言
console.log('language.split', language.split('-')[0]);

const i18n = new createI18n({
locale: localStorage.getItem('language') || language.split('-')[0] || 'en', // 先从缓存里拿,没有的话就用浏览器语言,
fallbackLocale: 'zh', // 设置备用语言
messages,
legacy: false,
globalInjection:true,

})

export default i18n

3、 en/index.ts

// en/index.ts
export default {
  'result.success.title': 'Submission Success',
  'result.success.description':
    'The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.',
  'result.success.operate-title': 'Project Name',
  'result.success.operate-id': 'Project ID',
  'result.success.principal': 'Principal',
  'result.success.operate-time': 'Effective time',
  'result.success.step1-title': 'Create project',
  'result.success.step1-operator': 'Qu Lili',
  'result.success.step2-title': 'Departmental preliminary review',
  'result.success.step2-operator': 'Zhou Maomao',
  'result.success.step2-extra': 'Urge',
  'result.success.step3-title': 'Financial review',
  'result.success.step4-title': 'Finish',
  'result.success.btn-return': 'Back List',
  'result.success.btn-project': 'View Project',
  'result.success.btn-print': 'Print'
}

4、 zh/index.ts

// zn/index.ts
export default {
  'result.success.title': '提交成功',
  'result.success.description':
    '提交结果页用于反馈一系列操作任务的处理结果, 如果仅是简单操作,使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明,如果有类似展示 “单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。',
  'result.success.operate-title': '项目名称',
  'result.success.operate-id': '项目 ID',
  'result.success.principal': '负责人',
  'result.success.operate-time': '生效时间',
  'result.success.step1-title': '创建项目',
  'result.success.step1-operator': '曲丽丽',
  'result.success.step2-title': '部门初审',
  'result.success.step2-operator': '周毛毛',
  'result.success.step2-extra': '催一下',
  'result.success.step3-title': '财务复核',
  'result.success.step4-title': '完成',
  'result.success.btn-return': '返回列表',
  'result.success.btn-project': '查看项目',
  'result.success.btn-print': '打印'
}

5、main.ts

// main.ts
import i18n from './i18n/index';
function vawBoot() {
  const app = createApp(App)
  useAppPinia(app)
  useAppRouter(app)
  useGlobalComponents(app)
  useRouterGuard()
  app.use(i18n)
  app.mount('#app')
  app.use(naive)
}

6、使用

// 使用方式
index.vue
<template>
    <div>
      {{ $t('result.success.title') }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()  // 国际化

</script>

 

标签:index,success,title,Ts,ts,result,Vue3,i18n
From: https://www.cnblogs.com/sundayRain/p/18167211

相关文章

  • Jumping Through Segments
    题目:链接:https://www.luogu.com.cn/problem/CF1907D大致思路:二分模拟关键点:①确定二分区间:最小值为第一次跳的左边界,最大值为连续两个线段的最远值(注意,应该有四种情况:左1减右1,左2减右1,左1减右2,左2减右2,取绝对值);②确定如何模拟:递推:假定跳跃长度≤k(mid),那么下一个最远就是ra+......
  • 在vue2中,什么是双向绑定,为什么vue3要进行优化?
    一、什么是双向绑定我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定举个栗子 当用户填写表单时,View......
  • vue3中ctrl加回车换行,光标位置设置
    <input v-model="text" type="textarea"@click="sbwz"@keydown="keysbwz" @keydown.enter.ctrl.exact.prevent="ctrlEnter" /> //暂存光标位置,后续截取换行使用consttextSplit=ref(0)//判断是否改变了上次光标位置constisTest=r......
  • vue3 把quill的base64变成图片地址
      你可以看看https://www.kancloud.cn/liuwave/quill/1434141或者看看别人的文章我的项目是vu3的 template的是这样的<el-form-itemlabel="中文详情"prop="content"><div><quill-editorref="QuillEditor"v-model:content="form.......
  • CobaltStrike 远控木马在42.194.250.177的80端口报警;奇安信网神态势感知报警(多次)
    在态势感知上报毒——目的IP:42.194.250.177的80端口。报毒名称为CobaltStrike远控木马活动事件,这个情况发生在已经封禁掉源IP和目的IP的前提下,所以让人百思不得其解。然后我登上了我的kali访问了这个目的IP的80端口,嘿!您猜怎么着?!这不是明摆着,欢迎您的到来嘛!这我不就来了嘛,Dir......
  • Vue3中SEO优化实践:利用unhead vue插件设置Mate标签
    我们在构建Vue3项目时,搜索引擎优化(SEO)是一个不可忽视的重要方面。优化网站结构、内容和代码,使其更符合搜索引擎的排名规则,对于提升网站曝光度和吸引更多用户至关重要。其中,设置合适的Mate标签(如标题、描述和关键词)是SEO优化的关键步骤之一。在Vue3项目中,我们可以利用unhead插件来......
  • ts的类型工具
    看了一遍阮一峰的ts文档,地址:https://wangdoc.com/typescript/utility#capitalizestringtype。ts提供了一些类型工具,在此记录一下,做个总结,加深印象。字符串的类型工具4种:Uppercase<S>字母大写Lowercase<S>字母小写Capitalize<S>首字母大写Uncapitalize<S>首字母小写其他......
  • uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
    原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目,支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈......
  • vite 项目,背景图报错 The request url "xx/xx/xx.xx" is outside of Vite serving all
    版本vite3.2.6vue3.2.37 背景本地启项目,项目中引用了自研组件库(没有安装,通过文件路径直接引用,便于调试项目和组件),两者文件夹是平级的组件库中背景图:background:100%/100%no-repeaturl('../assets/svg/xxx.svg'); 问题本地启动项目之后,背景图未正常展示浏览器控......
  • Echarts制作时变数据可视化+2024 QQ群聊记录制作词云图
    时变数据可视化Echarts其实就是个js文件,在开头导入一下就好了其实这部分我没有做太多时间,大部分代码都是gpt直接生成的(乐)所以这里只分享一下我觉得代码里比较有意思的部分先放效果图图中渐变效果的代码(来源CSDN某个博主)lineStyle:{shadowCo......