Vue 2 + Vite项目中Element-UI Table不显示问题记录

问题描述

在本地启动Vue 2 + Vite项目后，发现页面中的Element-UI表格不显示。数据传输正常，且控制台无报错信息。初步判断为Webpack升级到Vite后，某些插件不兼容导致的问题。

问题排查

1. 经过搜索，发现可能是由于Vite构建系统中插件的不兼容问题导致的。参考了简书上的文章，尝试更换为@vitejs/plugin-vue2-jsx插件。
2. 本地运行时，表格显示正常，但在打包后部署到线上环境时，问题复现。

解决方案

1. 根据博客园上的文章，修改了Vite配置文件中的别名（alias）设置，具体修改如下：

alias: [
  {
    find: '@',
    replacement: resolve(__dirname, 'src')
  },
  {
    find: '@components',
    replacement: resolve(__dirname, 'src/components')
  },
  { // 解决element-ui table不显示的问题
    find: 'vue',
    replacement: 'vue/dist/vue.esm.js'
  }
]

2. 提示：在尝试使用对象形式的alias配置时，遇到了错误。因此，改为使用数组形式，问题得以解决。
3. 修改后重新打包，并部署到线上环境，表格显示正常，且本地未出现报错信息。

依赖版本信息

• element-ui依赖信息：

"dependencies": {
  "element-ui": "2.15.14",
}

• /el-tree-select@3.1.14依赖信息：

"dependencies": {
  "core-js": "2.6.11",
  "element-ui": "2.13.2",
  "vue": "2.7.16"
}

以上记录为解决Vue 2 + Vite项目中Element-UI表格不显示的问题的过程和解决方案。