前言

记录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监听的一些断网测试等)。

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

electron项目踩坑--A JavaScript error occurred in the main process:document is not defined的更多相关文章

  1. [RN] windows7 安装 Realm Studio 后,打开报错 A JavaScript error occurred in the main process

    windows7  安装 Realm Studio 后,打开报错 报错如下: A JavaScript error occurred in the main process Uncaught Exce ...

  2. SSMS错误:A connection was successfully established with the server, but then an error occurred during the login process

    参考: 系统太慢,实在搞不清是哪里的问题,祭出重装大法 需要安装的工具还真多,先装主要的吧.VS2013, SQL SERVER 2012,搞定.. 连个数据库试试,出错了: A connection ...

  3. c# 使用MS SqlServer,连接成功,但是还报异常A connection was successfully established with the server, but then an error occurred during the login process. (provider: SSL Provider, error: 0。。。。

    c# 使用MS SqlServer,连接成功,但是还报异常A connection was successfully established with the server, but then an ...

  4. 首个hybird商业项目踩坑总结

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  5. PhoneGap,Cordova[3.5.0-0.2.6]:生成Android项目时出现错误(An error occurred while listing Android targets)

    我在升级到Cordova最新版本(3.5.0-0.2.6)后,在生成Android项目(cordova platform add android)时出现错误: Error: An error occu ...

  6. 创建Maven项目出现:An internal error occurred during: "Retrieving archetypes:". Java heap space 错误解决办法

    首先说明一下网上的方法: 在Eclipse中创建Maven的Web项目时出现错误:An internal error occurred during: "Retrieving archety ...

  7. html2canvas在Vue项目踩坑-生成图片偏移不完整

    背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...

  8. mpvue微信小程序项目踩坑记录

    1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...

  9. myeclipse启动项目时报:An internal error occurred during: "Launching TestSpring on Tomcat 7.x". java.lang.NullPointerException 解决方法

    如果出现了上述的错误按照如下的3个步骤解决: 1.首先关闭MyEclipse工作空间. 2.然后删除工作空间下的 “/.metadata/.plugins/org.eclipse.core.runti ...

随机推荐

  1. np.mean(img, axis=(0, 1))

    np.mean(img, axis=(0, 1))   img 是shape为(H,W,3)的图片 np.mean(img, axis=(0, 1)) 是求出各个通道的平均值,shape是 (3, ) ...

  2. sublime 使用过程中遇到的问题

    1.当我把鼠标放置在下图所示的class上几秒钟后,sublime就会在全局查找当前的class字符,这时sublime就会出现卡顿或无响应 解决方法: 点击preferences下的settings ...

  3. 深入解析 HTTP 缓存控制

    缓存(Cache)是计算机领域里的一个重要概念,是优化系统性能的利器. 由于链路漫长,网络时延不可控,浏览器使用 HTTP 获取资源的成本较高.所以,非常有必要把"来之不易"的数据 ...

  4. C语言:试探算法解决“八皇后”问题

    #include <stdio.h> #define N 4 int solution[N], j, k, count, sols; int place(int row, int col) ...

  5. Docker 概述(一)

    1-1 虚拟化技术发展史 在虚拟化技术出现之前,如果我们想搭建一台服务器,我们需要做如下的工作: 购买一台硬件服务器:在硬件服务器上安装配置操作系统系统:在操作系统之上配置应用运行环境:部署并运行应用 ...

  6. SpringBoot(十一): Spring Boot集成Redis

    1.在 pom.xml 中配置相关的 jar 依赖: <!-- 加载 spring boot redis 包 --> <dependency> <groupId>o ...

  7. Go语言学习之路-11-方法与接口

    目录 编程方式 go语言对象方法 自定义类型和方法 接收器: 方法作用的目标(类型和方法的绑定) go面向对象总结 方法的继承 go语言接口 为什么要用接口 接口的定义 接口的作用总结 接口的嵌套 空 ...

  8. 【pytest官方文档】解读fixtures - 2. fixtures的调用方式

    既然fixtures是给执行测试做准备工作的,那么pytest如何知道哪些测试函数 或者 fixtures要用到哪一个fixtures呢? 说白了,就是fixtures的调用. 一.测试函数声明传参请 ...

  9. 《Selenium自动化测试实战》新书上市,有需要朋友们可以了解下,欢迎大家多提宝贵意见

    京东:https://item.jd.com/13123910.html当当:http://product.dangdang.com/29204520.html 1. 本书基于 Python 3.8 ...

  10. C语言中指针和多维数组

    指针和多维数组 数组名是特殊的指针 数组是一个特殊的指针,多维数组也是更为复杂的数组,它们的关系是什么样的呢? 我们通过一个简单的例子来比较形象的了解指针和多维数组: int a[2][3]; 这是一 ...