VUE3之elementui-plus汉化(踩坑版)

一、前言

许久未用elementui-plus,最近在使用elementui-plus的Tour漫游式引导组件时,由于内置按钮语言默认为英文,需要进行汉化,在汉化过程中因为马虎没有汉化成功,网上各类文章引入路径及方式都有不同的偏差,查阅了官方文档终于解决了问题,原来引入路径近期已更新,记录更新时间2024/1/12,避免更多人踩坑。

二、具体实现及坑

  • 引入汉化包版本已更新,需特别注意路径及文件后缀,此处踩坑!
  • 后缀为mjs,且路径为element-plus/dist/locale/zh-cn

方式一

javascript 复制代码
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入汉化包,此处需特别注意路径及文件后缀
// 下面两种引入方式均可
// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import zhCn from 'element-plus/dist/locale/zh-cn'
const app = createApp(App)
app.use(router).use(ElementPlus, {locale: zhCn}).use(pinia).mount('#app')

方式二

xml 复制代码
<template>
   <!-- 使用语言包 -->
  <el-config-provider :locale="data.locale">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </el-config-provider>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// 引入汉化包,两种方式均可
// import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import zhCn from 'element-plus/dist/locale/zh-cn'
// 引入 ConfigProvider组件
import { ElConfigProvider } from "element-plus";
// 定义语言包
const data = reactive({
  locale: zhCn,
});
// const { } = toRefs(data)
</script>
<style lang="scss"></style>

三、官网图例

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
上海_彭彭4 小时前
【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
开发语言·python·sql·测试工具·element
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理