Vue使用el-table组件渲染空白问题

Vue 2 与 Vite 结合使用时 el-table 组件渲染空白问题的解决方法

有些开发者可能还没开始学习 Vue 3，但又想尝试使用 Vite 构建项目，于是根据文章指引进行搭建。然而，在本地启动开发服务器后，却发现 el-table 组件出现了空白渲染问题。

起初，怀疑可能是 Element-UI 组件未正确注册或数据传递存在问题，但经过检查发现 Button 组件和数据打印是正常的，这让人感到困扰。

page.json文件

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "sass": "^1.64.1",
    "vite": "^4.4.5"
  },
  "dependencies": {
    "element-ui": "^2.15.13",
    "vite-plugin-vue2": "^2.0.3",
    "vue": "^2.7.14",
    "vue-template-compiler": "^2.7.14"
  }
}

vite.config.js

import { createVuePlugin } from 'vite-plugin-vue2'
export default {
  plugins: [createVuePlugin()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/scss/theme.scss";`
      }
    }
  }
}

问题分析

查看了 pages.json 文件后发现，使用了 vite-plugin-vue2 这个社区插件，然而该插件并不支持 Vue 2.7 版本，因此导致了问题。

解决方法

1. 将Vue版本降为2.6或vite-plugin-vue2支持的版本

npm uninstall vue
npm install vue @2.6
npm uninstall vue-template-compiler
npm install vue-template-compiler@2.6

注意vue-template-compiler版本也要跟vue版本相同哦 不然否则会

2. 或者改用 @vitejs/plugin-vue2 插件，该插件支持 vue (>=2.7.0) 版本

注意这个只支持vue (>=2.7.0)的版本 所以也要升级Vue版本

npm install @vitejs/plugin-vue2
npm install vue@2.7

vite.config.js 注意文件中的vite-plugin-vue2要替换成@vitejs/plugin-vue2

// import { createVuePlugin } from 'vite-plugin-vue2'
import createVuePlugin from '@vitejs/plugin-vue2'

解决