美文网首页
Electron创建应用以及打包exe

Electron创建应用以及打包exe

作者: 李大鱼_ | 来源:发表于2020-11-26 13:48 被阅读0次

一、Electron官网文档,根据文档步骤创建应用

http://www.electronjs.org/docs/tutorial/quick-start#application-architecture

执行npm i --save-dev electron可能会报错,如图:

image.png

可以给electron设置淘宝镜像,
添加.npmrc文件,内容ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/。如图:

image.png
再执行npm i --save-dev electron就不会报错了。

创建应用之后执行npm start就可以在本地运行应用。

二、使用electron-packager打包成exe

全局安装打包神器electron-packager

npm install electron-packager -g

在命令中设置参数打包
执行命令electron-packager --help或者访问官网查看所有可配置参数。
基本命令:

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

命令说明:

  • sourcedir:项目源文件所在路径(唯一的必须参数)
  • appname:项目名称(直接使用package.json文件中的name属性更方便)
  • platform:要构建哪个平台的应用(Windows、Mac 还是 Linux)
  • arch:决定了使用 x86 (ia32)还是 x64(x64),还是两个架构都用
  • optional options:可选选项
    一个命令举例:
    electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules
    说明:
    electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules

在package.json文件中配置参数打包

命令较长,每次打包都需要输入很麻烦,可以把命令配置到package.json文件中scripts属性中:

 "scripts": {
    "start": "electron .",
    "package":"electron-packager . test1 --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
  },

然后便可运行命令npm run packager进行打包:

image.png

打包成功,生成out文件夹找到test1.exe,点击即可运行应用

image.png
image.png

相关文章

网友评论

      本文标题:Electron创建应用以及打包exe

      本文链接:https://www.haomeiwen.com/subject/xgsaiktx.html