背景

环境：vite +vue3.x + element-plus
项目采用的是按钮加载ElementPlus组件的方式，因为默认的语言是英文，设置为中文后，开发环境运行正常，打包后发现报错：

error.png

原有设置方式

import {  locale } from 'element-plus';
import lang from 'element-plus/lib/locale/lang/zh-cn';
import 'dayjs/locale/zh-cn';
locale(lang);

正确的设置姿势

import {  locale } from 'element-plus';
import lang from 'element-plus/lib/locale/lang/zh-cn';
import 'dayjs/locale/zh-cn';
if (typeof locale === 'function') {
  locale(lang); // 开发环境
} else {
  (locale as any).use(lang); // 生产环境
}

总结

其实一开始是在官网看到了 local(lang) 与 locale.use(lang) 两种方式的，在本地开发环境中 locale.use是提示报红的，也是不生效的。万万没有想到生产环境上是需要使用 local.use，确实是有些违背直觉的。