electron-vue框架开发时element-ui表格无法渲染的问题解决方案

问题描述

在使用github上集成的electron-vue框架开发项目时，引入了element-ui第三方模块。然而在使用表格组件时，页面始终一片空白。用F12审查元素，发现表格的高度始终为0。排除各种参数的影响之后，估计是渲染失败。

解决方案

经查看官方文档，发现问题所在：

.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文件
2. 搜索whiteListedModules
3. 将这一行修改为

let whiteListedModules = ['vue', 'element-ui']

重新调试项目后，发现表格组件渲染成功。