目录

科普小知识

npm 和 cnpm的不同之处

package.json中 dependencies 和 devDependencies的不同

参数 --save 和 --save-dev的不同

一、NPM安装依赖

以下命令均在项目根目录运行 

cnpm install -g electron

cnpm i electron-packager 第一种方式

 cnpm i electron-builder 第二种方式

说明

二、vue项目打包成dist文件

打包dist文件

以下操作均在dist文件中进行

三、Electron打包桌面端 packager打包

在项目的package.json文件中的"scripts"添加一行代码

最后开始打包

四、Electron打包可选择安装目录的exe builder打包

在项目的package.json文件中的"scripts"添加一行代码

配置package.json

最后开始打包

五、记录报错 一行代码解决

---

科普小知识

npm 和 cnpm的不同之处

• npm安装的包是树状结构，层级深，打包速度快
• cnpm安装的包是扁平化，展开node_modules会有非常多的文件，打包速度慢

package.json中 dependencies 和 devDependencies的不同

• dependencies 是生产环境，就是软件在正儿八经的场合用到
• devDependencies 是开发和测试环境，就是日常打代码所用的第三方插件

参数 --save 和 --save-dev的不同

• --save 是安装在生产环境
• --save-dev 安装在开发环境
• 默认安装在生产环境

一、NPM安装依赖

以下命令均在项目根目录运行 

推荐使用npm命令安装，如果npm报错cnpm也可以

electron在打包成exe时，是不允许electron相关的依赖存在生产环境当中的。所以下面命令都选择用 --save-dev 来安装

cnpm install -g electron

electron是打包必备的环境，建议用cmd全局安装。
以后打包好的文件再简单配置一下三个文件均可用electron . 来运行

cnpm install -g electron

cnpm i electron-packager 第一种方式

electron-packager 用来直接打包成桌面端，会直接生成一个安装完成的文件夹

cnpm i electron-packager --save-dev

 cnpm i electron-builder 第二种方式

electron-builder 用来打包成exe安装包，点击可进行安装选择目录

cnpm i electron-builder --save-dev

yarn add electron-builder --save-dev

说明

builder 和 packager 是两种不同的打包方式

两种方式都可以打包成多系统

builder打包完体积会比packager小、轻量化、支持热更新、多平台

二、vue项目打包成dist文件

打包dist文件

npm run build

根目录生成dist文件后
需要克隆github上electron的空架构

git clone https://github.com/electron/electron-quick-start

或者直接github去下载zip

https://github.com/electron/electron-quick-start

以下操作均在dist文件中进行

下载完之后需要把这三个文件放到dist文件中，不需要改动任何内容

• main.js
• package.json
• preload.js

在dist文件中执行命令运行

electron .

屏幕弹出一个框框就说明距离成功已经一大半了，如下。

如果启动后白屏，多半是因为静态资源路径不对，只需要在vue.config.js文件里配置以下静态资源路径就可以。

publicPath: './',

三、Electron打包桌面端 packager打包

在项目的package.json文件中的"scripts"添加一行代码

"electron_build": "electron-packager ./dist/ --win --ia32 --overwrite --icon=你的ico文件路径"

命令参数可参考 electron-packager 命令常用参数大全（含换图标方案）

最后开始打包

npm run electron_build

打包完成之后会提示如下语句

 文件的根目录会生成一个 electron-quick-start-win32-x64 的文件 说明打包完成了

四、Electron打包可选择安装目录的exe builder打包

在项目的package.json文件中的"scripts"添加一行代码

"electron_builder": "electron-builder --win --ia32"

配置package.json

以下是完整的配置，各取所需，使用前取消注释

"build": {
    "productName":"XXX",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.aimooc.xxxxx",//包名  
    "copyright":"xxxx",//版权 信息
    "directories": { // 输出文件夹
      "output": "builder"	// 默认项目根目录下的dist
    }, 
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, 	// 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",		// 安装图标路径
      "uninstallerIcon": "./build/icons/bbb.ico",	//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, 	// 创建桌面图标
      "createStartMenuShortcut": true,	// 创建开始菜单图标
      "shortcutName": "xxxx", 	// 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本,这个对于构建需求严格得安装过程相当有用。
    },
    // 更新用的配置，主要是为了生成lastest.yaml配置文件
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "files": [
      "./dist/main.js"    // dist文件的入口主文件
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [	// 打出来32 bit + 64 bit的包(这样的安装包体积较大，建议直接打32的包。
          	// "x64", // 一般建议去掉
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }

最后开始打包

npm run electron_builder

提示以下说明打包成功

 根目录会多出一个builder文件夹

 打包exe完成 试一试吧！

双击exe安装包

 

 选择安装目录，我们的目的已达成

 运行

成功拉

如果安装完后出现白屏的情况，大多数是因为electron主进程没有读取到index.html文件

是路径的问题，所以把dist文件中main.js里面的

  mainWindow.loadFile('index.html')

 修改成

  mainWindow.loadFile('dist/index.html')

再重新打包一次，问题解决。

五、记录报错 一行代码解决

packager打包报错1

说明缺少依赖直接install  npm不行用cnpm

npm install

packager打包报错2 'electron-packager' is not recognized as an internal or external command,翻译过来就是

 'electron-packager' 不被识别为内部或外部命令，

那就全局安装packager  npm不行用cnpm

npm install -g electron-packager

packager打包报错3

下载超时，需要更换国内镜像

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

更换完国内镜像重新执行打包命令就成功了