第一次使用时参考的是这位大佬的教程:从0到1使用vue+electron

创建好自己的vue项目(或者是使用vue开发的旧项目)直接添加插件:

vue add vue-cli-plugin-electron-builder 

该插件具体使用(包括运行和打包的语句)文档:vue-cli-plugin-electron-builder
安装好之后先用 npm run electron:serve 或者yarn electron:serve试一下能不能用electron窗体运行起来。
其实这一步就是大坑,因为经常会安装失败,多试试。推荐一种办法,先用cnpm install安装,然后整个node_modules文件夹删掉,再用npm install安装一次依赖。

打包时第一种错——下载依赖文件出错

INFO Building app with electron-builder:
• packaging platform=win32 arch=x64 electron=13.6.3 appOutDir=dist_electron\win-unpacked
⨯ Get “https://github.com/electron/electron/releases/download/v13.6.3/electron-v13.6.3-win32-x64.zip”: dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
• building target=nsis file=dist_electron\pc Setup 0.1.0.exe archs=x64 oneClick=true perMachine=false
⨯ Get “https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z”: dial tcp 20.205.243.166:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.在这里插入图片描述
意思是说打包所需的依赖文件winCodeSign-2.6.0.7znsis-3.0.4.2.7z这玩意下载失败,直接循着下载链接去把它下载下来。
或者在 https://github.com/electron-userland/electron-builder-binaries/releases ,自己找对应版本下载。

下载之后把压缩包解压后放在 C:\Users\Administrator\AppData\Local\electron\Cache 的electron-builder\cache\目录里,没有这个目录就自己创建。
放进来的目录长这样:
在这里插入图片描述

然后记得把上次打包没完成的 dist_electron 文件夹删除后,再使用npm run electron:build打包,会发现可以打包了。

打包时第二种错——文本编码错误, 未设置成 UTF-8 字符集

摘取一部分报错

Processing config: C:\Users\��\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1\nsisconf.nsh
Processing script file: "<stdin>" (ACP)
Error output:
Error output:!include: could not find: "C:\Users\{我的windows账户名}\AppData\Local\Temp\t-bDWVX6\0-messages.nsh"
Error in script "<stdin>" on line 75 -- aborting creation process

具体报错代码可看:添加链接描述
解决方法参考:https://www.azimiao.com/6250.html ,其实就是在该文件该方法下添加一行代码

解决完直呼牛逼。

打包时第二种错——项目名称为中文

直接报错不合法名字:

Error: Invalid name: "项目名称"
    at ensureValidName

解决方法:在package.json中修改

{
  "name": "projectName",
  "version": "1.0.0",
  "description": "描述",
  "author": "irony",
  "productName": "项目名也就是打包出来的exe文件名称",
  ……
 }
Logo

前往低代码交流专区

更多推荐