vue3项目国际化,你还不了解吗?

简介: vue3项目国际化,你还不了解吗?

vue3使用的国际化库为:i18n

安装方式:

npm install vue-i18n@next

安装完成后在src文件夹下新建lang文件夹

lang文件夹下新建需要语言转换的文件夹,这里以中文zh英文en举例,在这两个文件夹下新建需要转换的语言

zhindex.ts中写好我们需要转换的语言

enindex.ts也是一样的

lang文件夹下新建index.ts文件,在该文件下引入刚才的建立的语言包,配置需要使用的默认语言

// lang -> index.ts
import { createI18n } from 'vue-i18n'
import zh from './zh' 
import en from './en'
/* 这里必须是messages名称 */
const messages = {
    'zh-US' : zh,
    'en-US' : en
}
const i18n = createI18n({
    legacy: false,         // 使用 Composition API 模式,则需要将其设置为false
    globalInjection: true, //全局生效$t
    locale: 'zh-US',          // 默认使用的语言
    messages,  // 使用数据源
})
export { i18n }

main.ts文件下导入并挂载i18n

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router/index";
// 引入国际化
import { i18n } from './lang/index'
const app = createApp(App)
/* globalProperties一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。 */
app.config.globalProperties.$i18n = i18n; 
app
.use(router)
.use(i18n)  // 挂载i18n
.mount("#app")

main文件设置好后,我们就可以在页面使用了,页面的使用方法:

<div>
  <el-switch
      v-model="lang"
      inline-prompt
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #97a0ff"
      active-text="中"
      inactive-text="英"
      @change="languageChange"
  />
  <!-- 在页面中使用,这里对应的是语言包中的对象,此处可以使用模板字符串 -->
  <span>{{  t('navUtil.loginText')  }}</span>
</div>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const lang = ref(true);  // 开关,语言状态切换
/* getCurrentInstance()可以用来获取当前组件实例 */
let current = getCurrentInstance()?.appContext.config.globalProperties as any;
// 根据状态,切换国际化
const languageChange = (val : boolean) => {
  // false英 true中,此处的zh-US就是lang -> index.ts -> messages对象的键名
  val ? current.$i18n.locale = 'zh-US' : current.$i18n.locale = 'en-US'
}


如果是后台返回的菜单数据,我们需要根据菜单数据的键做语言处理,例如这样的

首先需要在lang对应的中英文文件夹下新增语言配置,由于后台返回的键名都是一样的,我们可以使用 键+id 的方法让这些键保持独立,例如:

菜单一般都是遍历出来的,在页面中用模板字符串拼接id即可

<span>{{ t(`menu.authName${item.id}`) }}</span>

如果觉得这篇文章对你有帮助,欢迎点赞👍、收藏💖、转发✨哦~

目录
相关文章
|
6天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
106 10
|
4月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
735 5
|
1月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
249 1
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
145 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
95 0
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
296 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
409 17
|
5月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
3月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
133 0
|
5月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
412 6