记一次vue-devtools&electron安装踩坑记录

368 阅读2分钟

背景

本人身处一家技术比较古老的公司,十分幸运(bushi)遇到了一个将H5页面嵌入在C#客户端里面的项目,得单独安装vue-devtools才能跑。在云桌面里面开发,用的是公司的自己弄的镜像库,然后简简单单的一个vue-devtools都能安装失败。。。因此记录一下无法使用万能的淘宝镜像库的情况下,踩坑与解决历程。

问题

vue-devtools依赖了electron,问题主要就出在electron的安装上了,一直提示github.com连接超时。

解决历程

问题其实很明显,就是某个地方要访问github.com,云内没有网不能访问再正常不过了。经历了一系列搜索之后,发现是electron安装完成后,有个postinstall钩子,会在安装完成后执行install.js文件,也就是在执行install.js文件时报错了。如果不能安装好,后面在运行vue-devtools的时候也会报electron没有正确安装。 image.png

1.失败的尝试

  • ELECTRON_MIRROR

npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

当然这里我没有设置成淘宝镜像,而是设置成公司的镜像库。但是并没有什么卵用,还是去请求了github.com,原因后面再细究吧,如果我找到了再补充

  • 修改install文件的mirrorOptions

image.png 这次能正常访问镜像库了,但问题来了,公司的镜像库,他没有把这个二进制文件也镜像过来。。。(╯‵□′)╯︵┻━┻。在经历了跑起来C#客户端的折磨后,又折腾了vue-devtools俩小时最终以404结束,然后先下班了,毕竟周五了。愿今后没有云桌面。

2.成功的尝试

周一上班了,暂时没啥活,只能接着看这个问题假装自己在干活了。

那么其实核心问题就在downloadArtifact这个文件了,因此debug进去看了一下这个方法在干嘛。虽然我现在也没完整看完它在看嘛,但是看到了cache这个核心词,那不就意味着给了离线下载的手段?然后debug一下这个cachedPath的值,把从淘宝镜像那边下载到的二进制文件放到这个缓存地址下,手动执行node install,终于能正常运行了~~快乐

压缩包下载地址:

  1. 淘宝镜像:npm.taobao.org/mirrors/ele…
  2. GitHub:github.com/electron/el…

image.png

有老哥直接改代码,更简单粗暴,可惜没有早点看到,写记录的时候才搜到:electron离线安装 (ngui.cc)

参考文章

  1. electron下载失败_解决方案汇总_@带甜味的盐@的博客-CSDN博客_electron 下载失败
  2. Electron安装过程深入解析(读完此文解决Electron安装失败导致的无法启动,无法打包的问题) - 走看看 (zoukankan.com)
  3. 安装使用electron辛路历程 - 走看看 (zoukankan.com)
  4. electron启动踩坑记:electron无法下载,手动导入解决_Alaia.的博客-CSDN博客_electron无法下载
  5. Installation | Vue Devtools (vuejs.org)