前言
记录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监听的一些断网测试等)。
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。