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

菜菜的大狗

已于 2023-07-28 08:59:58 修改

阅读量2.3k

点赞数 4

文章标签： vue.js 前端 javascript elementui

于 2023-07-27 17:19:55 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61315972/article/details/131961685

版权

当开发者尝试使用Vite构建Vue2项目并遇到el-table组件渲染空白的问题时，可能是因为vite-plugin-vue2不兼容Vue2.7版本。解决方案包括降级Vue和vue-template-compiler到2.6版本，或者切换到@vitejs/plugin-vue2插件，并确保Vue版本大于等于2.7.0。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'

解决

在这里插入图片描述