老项目(Webpack + Vue2.x)改造为Vite脚手架,出现一个诡异的问题,项目中的el-table无法显示了...最骚的是没有任何报错。
经过反复试验、重装依赖,降级Element-UI版本等操作,也无法解决该问题,后来找到一篇解决方案《Vite + Vue2.7 + elementUI2.15.10 ,el-table 无法显示、el-table不渲染、el-table不报错》,终于发现了问题的关键所在。
package.json
中,VUE的版本是 ^2.6.14
,实际安装的版本为2.7.14
,问题就出在这。
"vue": "^2.6.14", // 实际安装版本2.7.14
项目是vue2的,使用了vite-plugin-vue2
插件,但是2.7及以后,则需要安装vitejs/vite-plugin-vue2,于是卸载vite-plugin-vue2
,安装了 @vitejs/plugin-vue2
。
发现el-table组件可以正常渲染了,至此问题解决。
追加:
后来改造其他老项目,运行项目时npm run dev
报错:
TypeError: vite.createFilter is not a function
这是因为,vite插件与vite版本不兼容导致的,升级下vite即可。
npm install -D vite@^3