Vue CLI Electron Builder BUG

简介: Vue CLI Electron Builder BUG

产生场景

通常,下载 electron 的时候我们都会指定下载源,一般我们都是使用 .npmrc 文件或者 .yarnrc 文件来配置,如下所示:


  • .npmrc 文件配置:
home="https://npmmirror.com"
registry="https://registry.npmmirror.com/"
electron_mirror="https://npmmirror.com/mirrors/electron/"
electron_builder_binaries_mirror="http://npmmirror.com/mirrors/electron-builder-binaries/"点击复制复制失败已复制


  • .yarnrc 文件配置
home "https://npmmirror.com"
registry "https://registry.npmmirror.com/"
disturl "https://npmmirror.com/dist"
electron_mirror "https://cdn.npmmirror.com/binaries/electron/"
electron_builder_binaries_mirror "http://npmmirror.com/mirrors/electron-builder-binaries/"点击复制复制失败已复制


我们的Electron桌面应用是使用vue cli中的electron builder插件来实现的,依赖包版本如下:

  • vue3.x
  • vue cli electron builder2.1.1
  • electron13.x


运行时没问题,但是遇到打包的时候就出现了问题,如下所示:

To ensure your native dependencies are always matched electron version, simply add script `"postinstall": "electron-builder install-app-deps" to your `package.json`
  • writing effective config  file=dist_electron\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=13.6.3 appOutDir=dist_electron\win-unpacked
  ⨯ cannot resolve https://npmmirror.com/mirrors/electron/13.6.3/electron-v13.6.3-win32-x64.zip: status code 404
github.com/develar/app-builder/pkg/download.(*Downloader).follow
        /Volumes/data/Documents/app-builder/pkg/download/downloader.go:237
github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry
        /Volumes/data/Documents/app-builder/pkg/download/downloader.go:128
github.com/develar/app-builder/pkg/download.(*Downloader).Download
        /Volumes/data/Documents/app-builder/pkg/download/downloader.go:112
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload
        /Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:192
github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download
        /usr/local/Cellar/go/1.16.5/libexec/src/runtime/asm_amd64.s:1371
ExecError: E:\code\Thermostat3\mock-tool\node_modules\.pnpm\app-builder-bin@3.7.1\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE    
    at ChildProcess.<anonymous> (E:\code\Thermostat3\mock-tool\node_modules\.pnpm\builder-util@22.14.5\node_modules\builder-util\src\util.ts:250:14)
    at Object.onceWrapper (node:events:640:26)
    at ChildProcess.emit (node:events:520:28)
    at ChildProcess.cp.emit (E:\code\Thermostat3\mock-tool\node_modules\.pnpm\cross-spawn@7.0.3\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1092:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) {
  exitCode: 1,
  alreadyLogged: false,
  code: 'ERR_ELECTRON_BUILDER_CANNOT_EXECUTE'点击复制复制失败已复制


问题定位

从错误信息中可以看到,错误产生的原因是 https://npmmirror.com/mirrors/electron/13.6.3/electron-v13.6.3-win32-x64.zip 文件找不到。最终发现这个 URL 不正确,正确的 URL 是: https://npmmirror.com/mirrors/electron/v13.6.3/electron-v13.6.3-win32-x64.zip


这个问题在 Electron 网站上已经有了说明,相关官方文档


解决方案

基于官方文档,可以有以下两种解决办法:


直接修改 ELECTRON_MIRROR 地址

  • .npmrc 文件配置:
home="https://npmmirror.com"
registry="https://registry.npmmirror.com/"
electron_mirror="https://npmmirror.com/mirrors/electron/v"
electron_builder_binaries_mirror="http://npmmirror.com/mirrors/electron-builder-binaries/"点击复制复制失败已复制


  • .yarnrc 文件配置
home "https://npmmirror.com"
registry "https://registry.npmmirror.com/"
disturl "https://npmmirror.com/dist"
electron_mirror "https://cdn.npmmirror.com/binaries/electron/v"
electron_builder_binaries_mirror "http://npmmirror.com/mirrors/electron-builder-binaries/"点击复制复制失败已复制


增加 ELECTRON_CUSTOM_DIR 变量

  • .npmrc 文件配置:
home="https://npmmirror.com"
registry="https://registry.npmmirror.com/"
electron_mirror="https://npmmirror.com/mirrors/electron/"
electron_custom_dir="v{{ version }}"
electron_builder_binaries_mirror="http://npmmirror.com/mirrors/electron-builder-binaries/"点击复制复制失败已复制


  • .yarnrc 文件配置
home "https://npmmirror.com"
registry "https://registry.npmmirror.com/"
disturl "https://npmmirror.com/dist"
electron_mirror "https://cdn.npmmirror.com/binaries/electron/"
electron_custom_dir "v{{ version }}"
electron_builder_binaries_mirror "http://npmmirror.com/mirrors/electron-bu
目录
相关文章
|
11天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
27 1
vue学习第四章
|
11天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
23 1
vue学习第九章(v-model)
|
11天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
24 1
vue学习第十章(组件开发)
|
17天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
17天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
16天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
26 3
|
16天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
34 2
|
29天前
|
JSON JavaScript 前端开发
开发桌面程序-Electron入门
【10月更文挑战第16天】Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,嵌入了 Chromium 和 Node.js。本文介绍了如何搭建 Electron 开发环境,包括安装 Node.js、创建项目、配置 main.js 和打包应用。通过简单的步骤,你可以快速创建并运行一个基本的 Electron 应用程序。
开发桌面程序-Electron入门
|
4月前
|
JavaScript 开发工具
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
|
5月前
|
前端开发
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件
PC端01,桌面端,electron的开发,electron的开发的系列课程,软件开发必备流程,electron的讲解,electron的开发,vitepress博主的gitee链接,PC端效率软件