问题

在把一个 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 异常问题组合

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

在搜索过程中，发现 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 的解析路径解决。

解决办法

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",
      }
    ]
  }
})

经过测试：

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

–End–