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'