electron 使用vue配置指南

Championer
1,463 阅读2分钟

如何使用vue进行开发electron？

1. 安装node版本14.16.0以上

2.安装 python 和 Visual Studio 软件

可使用命令进行安装 npm install --global --production windows-build-tools,如还失败可尝试使用npm --python_mirror=https://registry.npmmirror.com/-/binary/python/ install --global windows-build-tools

安装卡着的解决办法如下：

  • 如果安装遇到一直卡在如下位置，可在 C:\Users\Administrator\.windows-build-tools 下找到 vs_BuildTools.exe 文件运行单独进行安装 nodejs生成工具 和 c++生成工具 image.png
  • 设置npm安装源 - 可设置为淘宝镜像地址：npm config set registry https://registry.npm.taobao.org
  • 设置electron安装源：npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

3. 创建vue程序，步骤可查看vue官方文档

4. 安装 electron-builder 安装方法 vue add electron-builder

5. 运行 npm run electron:serve

5.1 运行启动不起来exe问题解决

当一个项目有`yarn.lock`但是电脑运行环境没有yarn环境时，就会出现启动不了electron程序的情况。
删除yarn.lock文件重新运行即可

6. 打包 npm run electron:build

6.1使用mac开发打包windows安装包方法

vue-cli-service electron:build --windows --x64

6.2打包mac安装方法

vue-cli-service electron:build --macos

打包报错解决方案

mac目录在：/Users/****/Library/Caches/electron，/Users/****/Library/Caches/electron-builder

  • 错误信息 x cannot resolve https://npm. taobao.org/mirrors/electron/11.4.1/electron-v11.4.1-win32-x64.zip: status code 404 github. com/develar/app-builder/pkg/download. (*Downloader). follow

    解决方案：在这个链接中npmmirror.com/mirrors/ele…找到相应的版本单独下载文件，然后在此文件夹中下载 <SHASUMS256.txt>在%LOCALAPPDATA%（C:\Users\Administrator\AppData\Local）目录下找到electron\cache把下载好的文件全部复制进去，进行打包

  • 错误信息 Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z":

    解决方案：可复制上方链接进行单独下载文件，在%LOCALAPPDATA%（C:\Users\Administrator\AppData\Local）目录下新建electron-builder\cache\，正常情况下目录是存在的。解压到 winCodeSign 这个目录中。一般全路径为：C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

  • 错误信息 Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z"

    解决方案：可复制上方链接进行单独下载文件，在%LOCALAPPDATA%（C:\Users\Administrator\AppData\Local）目录下新建electron-builder\cache\，正常情况下目录是存在的。解压到 nsis 这个目录中。一般全路径为：C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1

  • 错误信息 Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z"

    解决方案：可复制上方链接进行单独下载文件，在%LOCALAPPDATA%（C:\Users\Administrator\AppData\Local）目录下新建electron-builder\cache\，正常情况下目录是存在的。解压到 nsis 这个目录中。一般全路径为：C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1

  • 错误信息 Cannot find module 'fs/promises'

    解决方案：

    1. 锁定正常运行的版本即可，package.json中 "electron-updater": "^4.3.5" 改为 "electron-updater": "4.3.5" ；
    2. 替换node_modules文件夹中electron-builder文件夹下 require("fs/promises")为require("fs").promises
  • 所有环境都正常，运行走了4321么有启动起来exe

    解决方案： 当一个项目有yarn.lock但是电脑运行环境没有yarn环境时，就会出现启动不了electron程序的情况。所以删除yarn.lock文件运行即可

avatar
文章
阅读
粉丝