一、前言
许久未用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>