美文网首页
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