electron-vue在使用element-ui时部分组件没法显示问题

原文链接: https://juejin.im/post/5d132629e51d45772a49ad71

问题描述

在使用electron开发桌面系统时，遇到部分element-ui组件在页面中没法渲染的问题。我遇到的是el-table组件没有被渲染，致使没法显示数据。

解决方法

在electron-vue的描述文档中有一段关于白名单的说明，以下：

• 白名单里的外部组件

• 一个关于此配置的重要的事情是，你能够将特定的模块列入白名单，而不是把它视为 webpack 的 externals。并无不少状况须要这个功能，但在某些状况下，对于提供原始的 *.vue 组件的 Vue UI 库，他们须要被列入白名单，以致于 vue-loader 可以编译它们。另外一个使用状况是使用 webpack 的 alias，例如设置 vue 来导入完整的 编译+运行环境 的构建。所以，vue 已经在白名单中了。

 

由此能够判断，只须要将element-ui加入到这个白名单中就能够解决上面的问题。白名单配置文件为.electron-vue文件夹中的webpack.renderer.config.js文件，只需将代码

let whiteListedModules = ['vue']

　　

修改成

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

　

问题解决