问题

在把一个 vue-cli (webpack4 + vue2 + element-ui) 创建的项目,改造成 vite + vue2 + element-ui 项目的过程中,开发环境 el-table 正常渲染,生产环境打包后 el-table 组件无法渲染。

改造为 vite 项目的关键组件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"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"
}
}

排查

1、用同样的代码在vue-cli 下打包,开发环境 el-table 正常渲染,生产环境 el-table 正常渲染,说明代码没问题。

2、升级 @vitejs/plugin-vue2 2.3.x,生产环境 el-table 依然无法渲染

3、把 vite 降到 3.2.x,生产环境 el-table 正常渲染

4、升级 vite 3.2.x 和 @vitejs/plugin-vue2 1.1.2,生产环境 el-table 正常渲染

5、升级 vite 3.2.x 和 降级 @vitejs/plugin-vue2 1.1.1,开发环境 el-table 无法渲染,生产环境 el-table 正常渲染

关于 el-table 异常问题组合

vue element-ui vite @vitejs/plugin-vue2 开发环境 生产环境
2.7.x 2.15.5 4.4.x 2.3.x 正常 异常
2.7.x 2.15.5 4.4.x 1.1.2 正常 异常
2.7.x 2.15.5 4.4.x 1.1.1 异常 异常
2.7.x 2.15.5 3.2.x 2.3.x 正常 正常
2.7.x 2.15.5 3.2.x 1.1.2 正常 正常
2.7.x 2.15.5 3.2.x 1.1.1 异常 正常

探索其他人是否遇到类似问题

在搜索过程中,发现 element 官方仓库中有人遇到了类似问题:

1、vue2.7版本中,el-table渲染空白

2、webpack下vue2.7.x, el-table渲染空白

还有 vite-plugin-vue2 仓库也有人反馈此问题:

3、vite-plugin-vue2 does not support some components of ElementUI

尤老板是这么回复的:

根本原因是 element-ui 用的是 cjs 语法然后 require 了 vue,导致它引用了 cjs 版本的 vue,而你的主应用跑的是 esm 版本的 vue(实际上等于应用里跑了两个 Vue)

这个情况在 Vue 3 依赖里比较少见,可以通过默认强行指定 vue 的解析路径解决。

001

解决办法

1、在 vite.config.js 中添加:

1
2
3
4
5
6
7
8
9
import { defineConfig } from 'vite'

export default defineConfig({
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js'
}
}
})

另外一种写法:

1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'vite'

export default defineConfig({
resolve: {
alias: [
{
find: "vue",
replacement: "vue/dist/vue.esm.js",
}
]
}
})

经过测试:

vue element-ui vite @vitejs/plugin-vue2 开发环境 生产环境
2.7.x 2.15.5 4.4.x 2.3.x 正常 正常
2.7.x 2.15.5 4.4.x 1.1.2 正常 正常
2.7.x 2.15.5 4.4.x 1.1.1 正常 正常
2.7.x 2.15.5 3.2.x 2.3.x 正常 正常
2.7.x 2.15.5 3.2.x 1.1.2 正常 正常
2.7.x 2.15.5 3.2.x 1.1.1 正常 正常

以上几种无法渲染的问题全部得到解决。

–End–