【Electron-Vue】构建桌面应用（2）-打包生成可window安装包

1.前言

在上篇文章中说到，使用Electron-Vue去构建一个Vue项目，并且可以通过package命令之后，生成了一些列的绿色文件(即执行安装包之后生成的文件)，点击其中的exe文件就可以运行了。

由于安装程序最后会以安装包的形式(即单一的exe文件)交付给客户，然后客户安装exe文件，会得到绿色文件。

下面这种就是安装包

下面这种就是安装之后的绿色文件

安装的同时会生成桌面图标，用户双击后会执行exe程序。

桌面图标

双击执行之后

以上所有的操作就是整个安装包从项目构建->项目打包->打包成安装包的整个过程

看起来可能很简单，但是在调研的过程中，整整搞了两天，先总结一下心路历程吧。

2.技术调研

如果你在网上搜索"electron打包成win桌面安装包"的话，肯定会搜到很多文章，但如果你跟着文章去实现，就会发现有的根本行不通，至少我是没有成功。

网上流传的方式基本上有以下几种：

1. 使用Grunt打包
2. 使用NSIS打包
3. 使用electron自带的插件electron-winstaller配合electron-squirrel-startup使用

我们先看一下这几种方式实现的时候回碰到什么坑

2.1 使用Grunt打包

我们知道如果使用Grunt打包，package.json和Gruntfile.js是必不可少的，所以我们需要先创建这两个文件。

创建这两个文件的目录是在我们通过package命令打包出来的文件同级目录，你也可以新建文件夹，然后把打包出来的Agent放到新文件下，然后在新创建的新文件中创建package.json和Gruntfile.js。

1.创建package.json文件

内容如下

{
  "name": "HelloWorld",
  "version": "1.0.0"  
}

2.创建Gruntfile.js文件

内容如下

var grunt = require("grunt");
grunt.config.init({
    pkg: grunt.file.readJSON('package.json'),
    'create-windows-installer': {
        x64: {
            appDirectory: './Agent/Agent-win32-x64',
            authors: 'mickey.',
            exe: 'Agent.exe',
            description:"Agent",
        }       
    }
})
 
grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);

 

3.安装Grunt依赖

• 安装grunt-cli

      npm install -g grunt-cli

如果不安装grunt-cli，在后面执行grunt打包的时候就会碰到下面这个错误

grunt : 无法将“grunt”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包