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']

　

問題解決