问题
在把一个 vue-cli 创建的 vue2 项目改造为 vite + vue2 的过程中，遇到一个奇怪问题，element-ui 的 el-table 组件，在开发环境正常显示，但是打包到生产环境时，el-table 无法显示，渲染为空白。
开始有点懵，以为代码写错了，经过多次排查后，发现代码没有问题。在 vue-cli 下打包出来的代码，生产环境 el-table 正常显示。
改造为 vite + vue2 项目的关键组件罗列如下：
{
"dependencies": {
"element-ui": "2.15.5",
"vue": "^2.7.0",
"vue-router": "^3.6.0"
},
"devDependencies": {
"@vitejs/plugin-vue2": "^1.1.2",
"@vitejs/plugin-vue2-jsx": "^1.0.3",
"vite": "^4.4.0",
"vue-template-compiler": "^2.7.0"
}
}
排查
排查过程比较枯燥，直接说结论，经过以下多种组合测试 el-table 组件是否有问题：
vite 4.4.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 2.3.x 开发环境正常，生产环境异常。
vite 4.4.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 1.1.2 开发环境正常，生产环境异常。
vite 4.4.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 1.1.1 开发环境异常，生产环境异常。
vite 3.2.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 2.3.x 开发环境正常，生产环境正常。
vite 3.2.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 1.1.2 开发环境正常，生产环境正常。
vite 3.2.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 1.1.1 开发环境异常，生产环境正常。
探索其他人是否遇到类似问题
诶嘿，果然有人遇到了同样的问题，在 element-ui 官方仓库有人讨论这个问题：
2、webpack下vue2.7.x, el-table渲染空白
还有人在 vite-plugin-vue2 仓库也反馈了此问题：
3、vite-plugin-vue2 does not support some components of ElementUI
并且得到了 vue 作者尤雨溪的回复：
至此，证据确凿，element-ui 必须背锅啊...
解决办法
在 vite.config.js 中添加如下代码，强制指定 vue 路径：
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js'
}
}
})
还有另外一种写法，按需取用：
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: [
{
find: "vue",
replacement: "vue/dist/vue.esm.js",
}
]
}
})
经过测试，在以上几种测试组合中的异常情况全部得到解决：
vite 4.4.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 2.3.x 开发环境正常，生产环境正常。
vite 4.4.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 1.1.2 开发环境正常，生产环境正常。
vite 4.4.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 1.1.1 开发环境正常，生产环境正常。
vite 3.2.x + vue 2.7 + element-ui 2.15.5 + @vitejs/plugin-vue2 1.1.1 开发环境正常，生产环境正常。
--End--
