在使用 Vue 2 结合 Vite 构建项目时，如果你引入了 Element-UI 并尝试使用 el-table 组件，可能会遇到一个常见问题：开发环境正常显示，但生产环境打包后表格内容为空或无法渲染。这个问题虽然看起来棘手，但其实是有迹可循的。
环境
- Vue 版本：Vue 2.7.16
- Element-UI 版本：2.15.13
- Vite 版本：6.20
二、问题现象
-
开发环境表现正常：
el-table组件可以正常渲染，数据和样式均正确显示。
-
生产环境问题：
- 打包后页面上看不到表格内容，甚至整个表格区域空白。
- 控制台无明显报错，但可能有警告信息提示样式未加载或组件未正确注册。
-
其他组件正常：
- 其他 Element-UI 组件（如 Button、Input）可以正常显示，说明基础依赖没有问题。
三、问题原因分析
1. Element-UI 的模块化方式
Element-UI 是基于 Vue 2 开发的 UI 框架，其内部使用的是 CommonJS (CJS) 模块系统，并通过 require('vue') 加载 Vue。这种加载方式会导致它引用了 CJS 版本的 Vue。
2. Vite 的模块化方式
Vite 默认使用 ES Module (ESM) 方式加载依赖，包括 Vue。因此，在同一个项目中，可能会同时存在两个不同版本的 Vue 实例：
- 一个是 ESM 格式的 Vue（由 Vite 引入）。
- 另一个是 CJS 格式的 Vue（由 Element-UI 引入）。
3. 多实例冲突
由于 Vue 的单例模式，当项目中同时存在多个 Vue 实例时，组件注册和渲染会出错，导致 el-table 无法正常工作。
四、解决方案
为了解决这个问题，我们需要确保整个项目中只使用一个 Vue 实例，并且是 Vite 默认使用的 ESM 格式的 Vue。具体步骤如下：
1. 修改 vite.config.js
在 vite.config.js 中添加别名（alias），强制指定 Vue 使用 ESM 格式。
方法一：简单别名配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js',
},
},
})
方法二：数组形式的别名配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: 'vue',
replacement: 'vue/dist/vue.esm.js',
},
],
},
})
注意：这两种写法效果相同，选择你喜欢的一种即可。
