Electron遇到的问题

最新推荐文章于 2025-05-21 11:31:27 发布

原创最新推荐文章于 2025-05-21 11:31:27 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

本文档提供了针对使用Electron框架开发的应用程序在打包、调试过程中遇到常见问题的解决方案，包括node-hid模块重建失败、jQuery兼容性问题、图标显示异常等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.node-hid模块rebuild无效

  "scripts": {
    "start": "electron .",
    "postinstall": "electron-rebuild --force"
  },
  "author": "hellosnow",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.5",
    "electron-builder": "^20.24.4",
    "electron-rebuild": "^1.8.1"
    "node-hid": "^0.7.3"
  }

改为

  "scripts": {
    "start": "electron .",
    "postinstall": "electron-rebuild --force"
  },
  "author": "hellosnow",
  "license": "ISC",
  "dependencies":{
    "node-hid": "^0.7.3"
  },
  "devDependencies": {
    "electron": "^2.0.5",
    "electron-builder": "^20.24.4",
    "electron-rebuild": "^1.8.1"
  }

原因：Electron-rebuild won’t rebuild packages that are listing in devDependencies. Moving node-hid to dependencies then rerunning the electron-rebuild script (specifically: electron-rebuild –force –module_dir . -w node-hid ) fixed all problems

2.与jq不兼容
提示Uncaught ReferenceError: $ is not defined
解决方案：

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

3.打包后没有加载对应的html，测试时正常，目录如下
这里写图片描述；

将build文件夹改名为其他，如app，即可解决

4.使用electron-builder构建win exe，exe图标和快捷方式还是旧版

"win": {
      "target": ["nsis"],
      "icon": "./app/assets/icon/icon256.ico"
    },

问题原因：桌面缓存，清楚缓存即可，将exe放入新建文件夹可看到新图标；

5.default Electron icon is used reason=application icon is not set
icon
Windows (NSIS)
Optional icon.ico (Windows app icon) or icon.png. Icon size should be at least 256x256.
need to be placed in the build directory. It is important to provide icon.ico (or icon.png), otherwise default Electron icon will be used.
我们需要创建build文件夹，使用icon.ico 覆盖，也可以使用
directories.buildResources 修改资源文件夹

6.win 所需的ico图标，最好采用套娃式的ico图标，否则会导致某些地方ico不显示，可以使用icofx处理
如何制作俄罗斯套娃一般的electron专用ico图标
这里写图片描述
7.图标目录如下
编辑linux deb包的时候总是提示
Remote builder error (if you think that it is not your application misconfiguration issue, please file issue to https://github.com/electron-userland/electron-bu
ilder/issues):

配置如下：

"build": {
    "appId": "com.tijos.TiEthWallet",
    "productName": "TiEthWallet",
    "copyright": "Copyright©2018HELLOSNOW",
    "compression": "maximum",
    "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
    "directories": {
      "buildResources": "./app/assets/icon",
      "output": "./dist",
      "app": "./"
    },
    "dmg": {
      "backgroundColor": "#FFFFFF",
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ],
      "title": "TiEthWallet ${version}"
    },
    "win": {
      "target": [
        "nsis"
      ]
    },
    "mac": {
      "category": "public.app-category.utilities",
      "target": [
        "dmg"
      ]
    },
    "linux": {
      "category": "Utility",
      "synopsis": "TiEthWallet",
      "description": "TiEthWallet",
      "target": [
        "AppImage",
        "deb"
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./app/assets/icon/icon.ico",
      "uninstallerIcon": "./app/assets/icon/icon.ico",
      "installerSidebar": "./app/assets/icon/left.bmp",
      "uninstallerSidebar": "./app/assets/icon/left.bmp",
      "artifactName": "${productName}-${version}-${os}-${arch}-setup.${ext}",
      "deleteAppDataOnUninstall": true
    }
  },