【踩坑日志】unplugin-element-plus 设置defaultLocale无效

发表于 更新于 分类于

defaultLocale
Replace default locale, you can find locale list here.

已经查看过类似问题 #151

问题描述

vite.config.js
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({  plugins: [vue(), ElementPlus({    defaultLocale: 'zh-cn'  })],})
12345678

以上配置无法替换默认语言，还必须加上以下导入：

main.js
import { createApp } from 'vue'import './style.css'import App from './App.vue'import 'element-plus/es/hooks/use-locale/index'createApp(App).mount('#app')
123456

通过查看代码才发现的😨

unplugin-element-plus/src/core/default-locale.ts
export const getLocaleRE = (options: Options) =>  new RegExp(    `${escapeStringRegexp(`${options.lib}/`)}(es|lib)${escapeStringRegexp(      '/hooks/use-locale/index'    )}`  )
5678910

复现步骤

  1. 通过模板创建 vite 项目npm create vite test -- --template vue
  2. 安装依赖cd test && npm install element-plus unplugin-element-plus
  3. 修改文件

vite.config.js 添加插件

vite.config.js
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import ElementPlus from 'unplugin-element-plus/vite'// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  plugins: [vue(), ElementPlus({ defaultLocale: 'zh-cn' })],})
123456778

src/App.vue 使用组件 el-popconfirm

App.vue
<script setup>import { ElPopconfirm } from 'element-plus'</script><template>  <el-popconfirm>    <template #reference>      <button>click</button>    </template>  </el-popconfirm></template>
1234567891011
  1. 启动开发服务器npm run dev
  2. 点击按钮发现是 No / Yes，预期是 取消 / 确定
    el-popconfirm
  3. 修改文件

src/main.js 添加导入 hooks/use-locale/index

main.js
import { createApp } from 'vue'import './style.css'import App from './App.vue'import 'element-plus/es/hooks/use-locale/index'createApp(App).mount('#app')
123456
  1. 回到页面，点击按钮发现是 取消 / 确定

✌️✌️️️️️️️️️️️️️️️✌️️️️️️️️️️️️️️️️️️️️️️️️️️️️️
️️️️️️
README 描述太少，定位问题浪费了时间😢