electron按照官网步骤打包失败的解决办法

官网的地址:快速入门 | Electron
当我们按照官网的步骤打包的时候,会遇到很多坑,最常见的就是链接网络下载地址失败、或者找不到指定module等,解决办法如下:以npm为例:
1.配置npm下载环境:在~/.npmrc里做如下设置

electron_mirror="https://npm.taobao.org/mirrors/electron/"
(该文件为隐藏文件,在命令行用vim进入即可,然后添加这句话)
2.各种依赖的版本用如下配置,亲测有效:测试日期是2021/10/29日
package.json用如下替换:

{
  "name": "my-electron-app024906",
  "version": "1.0.0",
  "description": "hhhh",
  "main": "main.js",
  "author": "wkk",
  "license": "MIT",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "dependencies": {
    "electron-compile": "^6.4.3",
    "electron-squirrel-startup": "^1.0.0"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.61",
    "@electron-forge/maker-deb": "^6.0.0-beta.61",
    "@electron-forge/maker-rpm": "^6.0.0-beta.61",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.61",
    "@electron-forge/maker-zip": "^6.0.0-beta.61",
    "electron": "15.3.0"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "my_electron_app024906"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

3.其余文件和官网一模一样。

4.输入cnpm i   然后npm run make 就大功告成

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用 Electron 可以将网页打包成桌面应用程序,以下是详细步骤: 1. 安装 Node.js 和 npm 在使用 Electron 之前,需要先安装 Node.js 和 npm。可以在 [Node.js 官网](https://nodejs.org/) 下载安装程序并进行安装。 2. 初始化项目 可以使用 npm 初始化项目,创建一个 package.json 文件: ``` mkdir my-electron-app cd my-electron-app npm init -y ``` 3. 安装 Electron 使用 npm 安装 Electron: ``` npm install --save-dev electron ``` 4. 创建应用程序 在项目文件夹中创建一个 main.js 文件,用于创建应用程序窗口: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载网页 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 5. 创建网页 在项目文件夹中创建一个 index.html 文件,用于显示在应用程序窗口中的网页。 6. 运行应用程序 在终端中运行以下命令启动应用程序: ``` npm start ``` 这将启动 Electron 并打开应用程序窗口,其中包含 index.html 文件中的内容。 7. 打包成应用程序 可以使用 Electron Packager 或 Electron Forge 等工具将应用程序打包成可执行文件。例如,使用 Electron Packager: ``` npm install electron-packager --save-dev ``` 在 package.json 文件中添加以下脚本: ```json "scripts": { "package-mac": "electron-packager . MyAppName --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds", "package-win": "electron-packager . MyAppName --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"My App Name\"", "package-linux": "electron-packager . MyAppName --overwrite --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --out=release-builds" } ``` 然后运行以下命令,根据需要替换 MyAppName: - Mac: `npm run package-mac` - Windows: `npm run package-win` - Linux: `npm run package-linux` 此时,会在 release-builds 目录中生成可执行文件。 以上是将网页打包成应用程序的详细步骤
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值