一、前言
最近我把專案進行了整體重構，將原先的vue和electron分為兩個工程資料夾的形式融合為了一個electron-vue工程檔案，因為有很大的改動，特別是環境和相關配置方面與原先的工程有很大的不同，隨之而來就有很多坑，這篇文章要將的就是今天碰到的element-UI一個元件重構前顯示OK但重構之後顯示不OK的問題，詳情請繼續閱讀。

二、問題描述
在vue元件中，使用了Element的el-table元件，當重構了之後發現這個元件在相應頁面不顯示（高度為零），資料什麼正常，語法OK，各種路徑也OK，控制檯也沒報錯，我花了一個上午找原因…

三、問題解析
在重構之後（electron-vue融合流），專案根目錄資料夾下有一個.electron-vue資料夾，下邊放著幾個js配置檔案（我的專案是6個js檔案），具體的每個js配置檔案詳情請參考electron官網描述（中文的，哈哈）。
另外我也瀏覽了Google，發現原來在vue中直接引入element的方式已經不能滿足融合流的要求啦。
請開啟.electron-vue資料夾下的webpack.renderer.config.js配置檔案，你會找到這樣一行程式碼，竟然需要新增白名單！對的，你沒看錯（不明白什麼是白名單的，請自行去問度娘）：

那麼，vue都需要這樣做，是不是element-ui也學要同樣的操作才能正常使用呢，嘿嘿，答對了，So…

四、問題解決（附上程式碼）
只需要將element-ui也新增進白名單就可以啦！

// 將vue模組列為白名單
let whiteListedModules = ['vue', 'element-ui']
1
2
然後重新執行專案，再進相應頁面就會發現萬惡的el-table元件不顯示的問題已經完美解決。