electron-vue项目踩坑--A JavaScript error occurred in the main process：document is not defined

前言

记录electron-vue项目开发中遇到的一个错误，运行时报错如图：

控制台报错如下：

　　ReferenceError: document is not defined
　　at Object.<anonymous> (E:\workspace\myElectron\my-electron-app\my-electron-app\node_modules\_element-ui@2.15.1@element-ui\lib\utils\dom.js:22:39)
　　at Object.<anonymous> (E:\workspace\myElectron\my-electron-app\my-electron-app\node_modules\_element-ui@2.15.1@element-ui\lib\utils\dom.js:235:3)
　　at Module._compile (module.js:642:30)
　　at Object.Module._extensions..js (module.js:653:10)

　　出错的提示是 document is nor defined  第一次遇到这样的错误，在element-ui中document没有定义，然后我就去对应的文件夹里找错，发现没什么用，然后找同学问，群里问，可能node环境的问题，紧接着我将本地的 node10 的版本升级到了14，删除依赖，再次安装依赖 ，一切能用的方法都用了，没办法，一行一行检查代码，发现是主进程中报错，去main.js中排查，找到了问题，原来 main.js 主线程中引入了渲染进程中的文件，而该文件需要访问 element-ui  这个文件，主进程中没有 document 这个对象，所以报错提示主进程中 document is not defined。

总结

　　Electron = Chromium + Node.js + Native API ,我的项目用的electron-vue脚手架搭建，引入了 element-ui 库，主进程负责了应用的中创建 BrowserWindow 实例以及各种应用程序事件，比如主进程中通知消息、Webcontents 事件、Webview新建窗口、注册全局的快捷键，创建系统菜单，响应自动更新等操作，应用程序入口指向主进程执行的 JavaScript 脚本，主进程使得nodejs 的一些 api 能在渲染进程中使用；渲染进程主要负责应用程序中用户界面，其实就是 webcontents 实例的网页，在渲染进程中能够使用dom提供的一些api外，能直接使用nodejs提供的api和electron 提供的 api （比如dialog弹窗，给鼠标右击绑定触发事件，window监听的一些断网测试等）。

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。