1. Preface
Recently, I refactored the project as a whole, and merged the original vue and electron into two project folders into one electron-vue project file, because there are a lot of changes, especially the environment and related configurations In terms of aspects, it is very different from the original project, and there are many pitfalls that follow. What this article will focus on today is the problem that a component of element-UI displayed OK before refactoring but not OK after refactoring. , read on for details.
2. Problem description
In the vue component, the el-table component of Element is used. After refactoring, it is found that this component does not display on the corresponding page (height is zero), the data is normal, the syntax is OK, and various paths are also OK. The console did not report an error, I spent a morning looking for the reason...
3. Problem analysis
After refactoring (electron-vue fusion flow), there is an .electron-vue folder under the project root directory folder, and several js configuration files are placed under it (my project has 6 js files), For details of each js configuration file, please refer to the electron official website description (Chinese, haha).
In addition, I also browsed Google and found that the original method of directly introducing elements into Vue can no longer meet the requirements of fusion flow.
Please open the webpack.renderer.config.js configuration file under the .electron-vue folder, and you will find such a line of code that needs to be added to the whitelist! yes, you read that right
So, vue needs to do this, does element-ui also need to learn the same operation to use it normally, hey, you got it right
4. Problem solving (attach the code)
just add element-ui to the whitelist!
// Whitelist vue modules
let whiteListedModules = ['vue', 'element-ui']
// 将vue模块列为白名单
let whiteListedModules = ['vue', 'element-ui']
Then re-run the project, and then enter the corresponding page, you will find that the problem that the evil el-table component is not displayed has been perfectly solved.