vue打包exe之electron-quick-start的npm install 报错

vue打包exe之electron-quick-start的npm install 报错

1、github地址

bash 复制代码
https://github.com/electron/electron-quick-start

2、问题

我使用的pnpm install正常安装,执行npm start提示错误

3、解决

package.json文件中加入

bash 复制代码
  "scripts": {
    "postinstall": "node node_modules/electron/install.js"
  },
  "config": {
    "electron": {
      "mirror": "https://registry.npmmirror.com/-/binary/electron/"
    }
  }

示例:

bash 复制代码
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
	"start": "electron .",
    "postinstall": "node node_modules/electron/install.js"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^32.1.2"
  },
  "config": {
    "electron": {
      "mirror": "https://registry.npmmirror.com/-/binary/electron/"
    }
  }

}

4、其他(打包exe)

安裝打包插件:npm i electron-packager --save-dev

package.jsonscripts标签添加

bash 复制代码
"packager": "electron-packager ./ hello --out=release --platform=win32  --arch=x64 --overwrite --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/  --ignore=node_modules"

参数解释:

命令解释如下:

  • ./ 表示项目目录是当前目录

  • hello 表示生成exe的名称

  • --platform=win32 表示运行时是windows

  • --out=release 表示生成目录是当前目录下的release 目录

  • --arch=x64 表示是64位平台

  • --overwrite 表示新生成的覆盖老的

  • --download... 表示依赖包采用国内的加速网络下载

  • --ignore 表示忽略node_modules的部分包版本,用来解决报错: This normally means that either you have deleted this package already somehow (check your

    ignore settings if using electron-packager). Or your module

    installation failed.

示例:

bash 复制代码
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "postinstall": "node node_modules/electron/install.js",
    "packager": "electron-packager ./ hello --out=release --platform=win32  --arch=x64 --overwrite --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/  --ignore=node_modules"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^32.1.2",
    "electron-packager": "^17.1.2"
  },
  "config": {
    "electron": {
      "mirror": "https://registry.npmmirror.com/-/binary/electron/"
    }
  }
}

修改完配置,执行命令:

bash 复制代码
npm run packager

参考

https://juejin.cn/post/7084628134309396494

https://blog.csdn.net/dong_beijing/article/details/130461361

https://www.jb51.net/javascript/3178779pj.htm

https://www.jb51.net/javascript/3077301ir.htm

相关推荐
秃头网友小李1 天前
前端难点:keep-alive 缓存什么?RouterView 的 key 为什么要带 scopeId?
前端·vue.js
怕浪猫1 天前
Electron 开发实战(十六):总结与展望|生态现状、框架对比、行业趋势与学习指南
前端·javascript·electron
徐小夕1 天前
JitWord 3.0 正式发布,高精度Word异构解析+复杂组件兼容,打造web端协同Word编辑器
前端·vue.js·算法
古德new2 天前
鸿蒙PC使用electron迁移:Joplin Electron 桌面适配全记录
华为·electron·harmonyos
奋斗吧程序媛2 天前
补充一个小知识点:有关@click.native
前端·vue.js
英勇无比的消炎药2 天前
一行命令背后:TinyRobot CLI 如何重构 AI 对话接入的效率范式
vue.js·aigc
jay神2 天前
基于 FastAPI + Vue 的宠物领养管理系统
前端·vue.js·python·毕业设计·fastapi·宠物
一杯奶茶¥2 天前
水果销售网站 CRM客户信息管理系统 超市管理系 酒店管理系统 健身房管理系统 在线音乐网站 校园招聘系统
java·vue.js·spring boot·mysql·spring·java项目
英勇无比的消炎药2 天前
一站式搞定品牌风格:TinyRobot 主题定制从入门到精通
vue.js
三声三视2 天前
Electron 在鸿蒙 PC 上跑 webview,我是怎么把首屏从 4.2s 干到 1.1s 的
华为·electron·harmonyos·鸿蒙