Electron-vue在使用 Element-ui 的时候Ta

一、问题描述

在使用Electron-vue搭配使用Element-ui的时候, 在使用Table表格的时候, 会出现页面一片空白, 使用F12进行审查元素的时候,表格的高度为0,而下面的tbody下面也是只是渲染了几个tr空标签，而自己也是找了好久的问题，最终才发现问题所在。
也是很感谢这篇文章的博主https://blog.csdn.net/qq_17285877/article/details/96095936#_6下面是他对问题的出现的解释

.electron-vue/webpack.renderer.config.js
针对 electron 的 renderer 进程。此配置用来处理你的 Vue 应用程序，
因此它包含 vue-loader 和许多其他可在官方 vuejs-templates/webpack 样板中找到的配置。
白名单里的外部组件
一个关于此配置的重要的事情是，你可以将特定的模块列入白名单，而不是把它视为 webpack 的 externals。
并没有很多情况需要这个功能，但在某些情况下，对于提供原始的 *.vue 组件的 Vue UI 库，他们需要被列入白名单，
以至于 vue-loader 能够编译它们。另一个使用情况是使用 webpack 的 alias，
例如设置 vue 来导入完整的 编译+运行环境 的构建。因此，vue 已经在白名单中了。

二、解决问题

• 1.在项目的根目录下再到.electron-vue/webpack.renderer.config.js
  webpack.renderer.config.js文件
• 2.打开/webpack.renderer.config.js文件搜索whiteListedModules

//let whiteListedModules = ['vue'] 
//将这行修改为下面的的内容
let whiteListedModules = ['vue', 'element-ui']

• 3.按F5进行重载或者退出调试模式运行npm run dev重新打开就可以看到表格可以正常显示了
  正常显示
  程序报错不可怕， 可怕的是没有报错，却没有出现预期的效果