Vue+Electron+Inno SetUp 打包桌面应用exe文件

1、两个项目

自己的vue项目

github的按例项目按例地址

// 进入项目
cd electron-quick-start
// 安装依赖库
npm install
// 运行应用
npm start

2、运行

首先在自己vue项目的package.json中的scripts添加2行，新加的两行是electron的启动和打包命令

"scripts":{
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist --platform=win32 --    arch=x64 --icon=./public/favicon.ico --overwrite"
}

在自己的vue项目目录下安装以下依赖(在使用electron_dev命令前，需要将vue.config.js中的publicPath:'/'修改为'./')
js
```
npm i electron --save-D
npm i electron-packager --save-D
```

在自己的vue项目的根目录下创建一个文件名为build，将electron-quick-start中的main.js复制到build文件夹下，并将main.js改名为electron.js，修改electron.js内容

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

function createWindow() {
    // 此处设置窗口大小
    const mainWindow = new BrowserWindow({
            width: 800,
            height: 600
        })
        // 此处设置入口页面
    mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, '../dist/index.html'),
            protocol: 'file:',
            slashes: true
        }))
        // 此处设置关闭菜单栏
    mainWindow.setMenu(null)
}
app.whenReady().then(() => {
    createWindow()
    app.on('activate', function() {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') app.quit()
})

然后使用命令，就可以将自己的vue项目以桌面软件的形式运行
js
```
npm run electron_dev
```

3、打包

首先将自己的vue项目进行打包

将build下的electron.js移动到dist文件下，同时还有electron-quick-start中的package.json，修改package.json文件如下

  {
    "name": "electron-quick-start",
    "version": "1.0.0",
    "description": "A minimal Electron application",
    "main": "electron.js",//新的js路径
    "scripts": {
        "start": "electron ."
    },
    "repository": "https://github.com/electron/electron-quick-start",
    "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
    ],
    "author": "GitHub",
    "license": "CC0-1.0",
    "devDependencies": {
        "electron": "^13.1.6"
    }
}

修改electron.js内容

  mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, 'index.html'),//新路径
            protocol: 'file:',
            slashes: true
  }))

最后使用命令打包，在自己的项目的根目录下会创建一个文件夹electron-quick-start-win32-x64，即存放exe文件，双击exe即可打开
请注意：这个exe文件并不是带有安装步骤的，如果想做带有安装步骤的，就得需要一个工具，即Inno SetUp
js
```
npm run electron_build
```

4、下载Inno SetUp工具

下载地址

5、创建setup文件

点击确定 1.打开Inno Setup后，选择使用向导，根据提示创建一个脚本模板。
点击下一步 2.填写程序信息
填写你的安装包的信息，点击下一步
点击下一步
这一步很重要，关系到你的程序是否会执行，完成后点击下一步
一直点击下一步，直到下面这个页面，点击下一步
一直点击下一步，然后点完成，如果你想安装后自动创建快捷方式，在后续的选择中选否，然后出现以下页面，在ICons下面添加红框内容
js
```
Name: "{userdesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
```
点击运行，上面的绿色小图标，这样你的带安装步骤的exe文件就制作完成了