Vue+Electron，对官方模板进行改动，并打包为exe文件_electron vue打包定制化

#项目地址#美化安装流程#

如果想美化安装流程，需访问以下地址，里面会提供两份二次打包所需代码文件，附带的有额外说明文档！
文章对应的项目地址

1 下载官方模板

注意：修改主进程配置（electron所有配置文件）文件后，需关闭已运行的进程，再启动才会生效，关闭进程再重新启动项目即可看到效果
注意：electron 23 及以上的主版本不再支持Windows 7/8/8.1，如有需要，降低electron版本即可，原文地址： https://www.electronjs.org/zh/blog/windows-7-to-8-1-deprecation-notice

1.1 安装 Electron

npm install -g electron
1

• 为了验证是否安装成功，可以使用如下的命令。

electron --version
1

1.2 检查镜像源设置

• electron 有可能存在下载包失败 / 打包时候报下载资源 404、证书失效等等错误，此时需检查npm配置

npm config get
1

• 找到以下区域，查看镜像源配置是否正确

disturl = "https://registry.npmmirror.com/-/binary/node"

electron_mirror = "https://registry.npmmirror.com/-/binary/electron/"

ELECTRON_MIRROR = "https://registry.npmmirror.com/-/binary/electron/"

registry = "https://registry.npmmirror.com/"

strict-ssl = false
1
2
3
4
5
6
7
8
9
10

• 如果不正确，使用以下方式进行单独修改

npm config set disturl=https://registry.npmmirror.com/-/binary/node

npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/

npm config set ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/
1
2
3
4
5

1.3 创建运行项目

• Electron 官方提供了一个简单的项目，可以执行以下命令将项目克隆到本地。

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

• 如果下不下来，那么我建议去gitee搜electron-quick-start,。会有跟github同步更新的仓库，当然文章对应的项目地址里也会有基础模板，只是不会同步更新
  

• 然后在项目中执行如下命令即可启动项目。

npm run start
1

2 自定义显示窗口的默认菜单

• 红框里的默认菜单可能满足不了需求 / 想用中文菜单，那么就来自定义菜单。
  

2.1 创建自定义菜单文件，写入/使用自定义菜单

2.1.1 创建自定义菜单文件，写入自定义菜单

• 在项目根目录创建menuConfig.js文件

-- menuConfig.js --

// 创建菜单模板
module.exports = {
  // process.platform 是 Node.js 提供的一个全局变量 'darwin'：表示 macOS 系统 'win32'：表示 Windows 系统 'linux'：表示 Linux 系统
  template: [
    {
      label: '文件',
      submenu: [
        {
          label: '打开', accelerator: 'Ctrl+O',
          click () {
            console.log("open")
          }
        },
        { label: '保存' },
        { type: 'separator' },
        { label: '退出', role: 'quit' }
      ]
    },
    {
      label: '编辑',
      submenu: [
        { label: '撤销', role: 'undo' },
        { label: '重做', role: 'redo' },
        { type: 'separator' },
        { label: '剪切', role: 'cut', accelerator: 'CmdOrCtrl+X', },
        { label: '复制', role: 'copy' },
        { label: '粘贴', role: 'paste' },
        { label: '删除', role: 'delete' },
        { type: 'separator' },
        { label: '全选', role: 'selectAll' }
      ]
    },
    {
      label: '查看',
      submenu: [{
        label: '重载',
        accelerator: (function () {
          if (process.platform === 'darwin') {
            return 'Ctrl+Command+A'
          } else {
            return 'F5'
          }
        })(),
        click: function (item, focusedWindow) {
          // if (focusedWindow) {
          //   // 重载之后, 刷新并关闭所有的次要窗体
          //   if (focusedWindow.id === 1) {
          //     BrowserWindow.getAllWindows().forEach(function (win) {
          //       if (win.id > 1) {
          //         win.close()
          //       }
          //     })
          //   }
            focusedWindow.reload()
          // }
        }
      }, {
        label: '切换开发者工具',
        accelerator: (function () {
          // 判断是否是macOS系统
          if (process.platform === 'darwin') {
            return 'Alt+Command+I'
          } else {
            return 'Ctrl+Shift+I'
          }
        })(),
        click: function (item, focusedWindow) {
          if (focusedWindow) {
            focusedWindow.toggleDevTools()
          }
        }
      }, {
        type: 'separator'
      }, {
        label: '应用程序菜单演示',
        click: function (item, focusedWindow) {
          if (focusedWindow) {
            const options = {
              type: 'info',
              title: '应用程序菜单演示',
              buttons: ['好的'],
              message: '此演示用于 "菜单" 部分, 展示如何在应用程序菜单中创建可点击的菜单项.'
            }
            dialog.showMessageBox(focusedWindow, options, function () { })
          }
        }
      }]
    },
    {
      label: '窗口',
      role: 'window',
      submenu: [{
        label: '最小化',
        accelerator: 'CmdOrCtrl+M',
        role: 'minimize'
      }, {
        label: '关闭',
        accelerator: 'CmdOrCtrl+W',
        role: 'close'
      }, {
        type: 'separator'
      }, {
        label: '重新打开窗口',
        accelerator: 'CmdOrCtrl+Shift+T',
        enabled: false, // 是否禁用  false 禁用 true
        key: 'reopenMenuItem',
        click: function () {
          app.emit('activate')
        }
      }]
    },
    {
      label: '帮助',
      submenu: [
        {
          label: '关于', click: function () {
            shell.openExternal('http://electron.atom.io')
          }
        }
      ]
    }
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

2.1.2 使用自定义菜单

-- main.js --

const { app, BrowserWindow, Menu } = require('electron')
const { template } = require('./menuConfig');

// 创建菜单对象
const menu = Menu.buildFromTemplate(template);

// 设置应用程序菜单
Menu.setApplicationMenu(menu);
1
2
3
4
5
6
7
8
9
10

3 项目运行后展示Vue项目，打包为exe程序

3.1 项目运行后展示Vue项目

• 将自己的Vue项目打包，并将文件拷贝到electron项目的根目录

-- main.js --
	
  // 我的打包后的文件名叫 vue-dist 根据自己的文件名自行修改
  global.__static = path.join(__dirname, '/vue-dist').replace(/\\/g, '\\\\')
  mainWindow.loadURL(`${global.__static}/index.html`)
1
2
3
4
5

3.2 开发过程中动态更新页面改动

• 上面想让electron展示Vue项目只能运行打包后的效果，那么开发过程中想实时看到效果就需要按以下配置

  // global.__static = path.join(__dirname, '/vue-dist').replace(/\\/g, '\\\\')
  // mainWindow.loadURL(`${global.__static}/index.html`)
  
  --  变成 --
  
  // 根据自己的本地地址修改
  mainWindow.loadURL('http://localhost:8001')
1
2
3
4
5
6
7

• 现在改动Vue代码，electron也会同步更新，这样正常用网页端去调试代码。

3.3 通过环境变量去区分生产/开发环境

• app.isPackaged 生产环境 返回true ，否则返回false，那么可以将上边写的配置进行区分

  // 加载应用程序
  if (!app.isPackaged) {
    // 读取文件url地址 - 开发用   生产环境 返回true ，否则返回false 
    mainWindow.loadURL('http://localhost:8001')
  } else {
    // 读取本地文件地址 - 打包用
    global.__static = path.join(__dirname, '/vue-dist').replace(/\\/g, '\\\\')
    mainWindow.loadURL(`${global.__static}/index.html`)
  }
1
2
3
4
5
6
7
8
9

3.4 打包为exe程序

3.4.1 无需安装的exe程序

• 修改读取资源位置

  // 开发用
  // mainWindow.loadURL('http://localhost:8001')
  
  // 打包用
  global.__static = path.join(__dirname, '/vue-dist').replace(/\\/g, '\\\\')
  mainWindow.loadURL(`${global.__static}/index.html`)
1
2
3
4
5
6

• *在package.json文件自定义打包命令

// electron 打包出来的项目名， platform=win32 windows 系统， --arch=x64 系统版本,  --icon 图标路径, --out打包后输出文件路径, app-version=0.0.1 版本号
"package": "electron-packager . electron --platform=win32 --arch=x64 --icon=./icon/icon.ico --out=./out-dist --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
1
2

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

• 运行打包命令

npm run package
// 如果报错 Cannot find module 'electron，更新下包即可, 更新后再执行 npm run package
// npm initall
// npm run package
1
2
3
4

• 由于electron装的版本不同，对Node版本的限制也不一样，如果Node版本不对，控制台会给出提示，自行升级版本即可。
  
• 打包后会在项目根目录out-dist/electron-win32-x64中找到已经打包好的exe文件，双击执行即可。

3.4.2 自定义安装的exe程序

• 上边的无法自定义安装位置，总会觉得不像是个exe程序，那么下边将会描述如何改成双击后执行自定义安装。
• 在项目根目录创建electron-builder.json文件

{
  "appId": "exe-dome.example.myapp", //  指定应用程序的唯一标识符，通常使用逆域名表示，用于在不同平台上标识应用程序
  "productName": "exe-dist", // 指定生成的安装程序的名称。
  "directories": {
    "output": "exe-dist" // 指定输出目录，即生成的安装程序的存放位置。
  },
  "win": {
    "target": "nsis", // 指定打包的目标格式为 NSIS（Nullsoft Scriptable Install System）安装程序。
    "icon": "./icon/icon.jpg", // 指定应用程序的图标文件路径。
    "artifactName": "${productName} Setup ${version}.${ext}" // 指定生成的安装程序的文件名格式 ${productName} 会被替换为应用程序名称，${version} 会被替换为应用程序版本号，${ext} 会被替换为文件扩展名。
  },
  "nsis": {
    "oneClick": false, // 禁用一键安装模式，用户需要手动选择安装选项。
    "perMachine": true, // 将安装程序安装为所有用户，而不是当前用户。
    "allowToChangeInstallationDirectory": true // 允许用户选择安装目录。
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 下载所需npm包

npm i electron-builder -D
1

• 在package.json文件自定义打包命令

// "build": "electron-builder"
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . electron --platform=win32 --arch=x64 --icon=./icon/icon.ico --out=./out-dist --asar --app-version=0.0.1 --overwrite --ignore=node_modules",
    "build": "electron-builder"
  },
1
2
3
4
5
6

• 注意：每次打包前建议确认上一次打包出来的文件已被手动删除，如果还存在，那么将其手动删除后再打包
• 执行自定义安装打包命令

npm run build
1

• 打包后在根目录exe-dist文件夹即可找到exe程序，双击执行即可出现安装程序
• 注意：安装后，此exe程序是真实安装到了电脑上，并会生成注册表文件，需手动卸载。
  

4 由渲染进程Vue来控制主进程electron的，全屏/半屏，最小化，关闭，最小化到系统托盘等。

• 现在项目的菜单是这个样子的，跟熟知的exe菜单完全不符合，现在希望更加美观，并且更加灵活，那么就需要由界面来控制菜单了。
  

4.1 隐藏窗口的默认菜单

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 指定是否显示窗口的默认菜单项。设置为 true 表示显示，默认为 true。
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
1
2
3
4
5
6
7
8

4.1.1 隐藏后效果

4.1.2 窗口其他配置项

	width: 1200, // 窗口宽度
    height: 600, // 窗口高度
    // minWidth: 800, // 窗口的最小宽度。
    // minHeight:600, // 窗口的最小高度。
    // maxWidth:800, // 窗口的最大宽度。
    // maxHeight:600, // 窗口的最大高度。
    // x: 0, // 窗口的横坐标（以像素为单位），默认为屏幕的中心。
    // y: 0, // 窗口的纵坐标（以像素为单位），默认为屏幕的中心。
    frame: true, // 指定是否显示窗口的默认菜单项。设置为 true 表示显示，默认为 true。
    transparent: false, // 指定窗口是否透明，默认为 false。
    // backgroundColor: 'pink', // 窗口的背景颜色，可以使用颜色名称、HEX 值或 RGB 值进行设置。
    title: "exe", // 窗口的标题，优先级低于加载文件。
    // icon: "./icon/icon.jpg", // 窗口的图标路径。
    show: true, // 指定窗口创建后是否立即显示，默认为 true。
    resizable: true, // 指定窗口是否可以调整大小
    center: true, // 指定窗口是否在屏幕中居中，默认为 true。
    movable: true, // 指定窗口是否可以移动，默认为 true。
    minimizable: true, // 指定窗口是否可以最小化，默认为 true。
    maximizable: true, // 指定窗口是否可以最大化，默认为 true。
    closable: true,//指定窗口是否可以关闭，默认为 true。
    fullscreenable: true, // 指定窗口是否可以进入全屏模式，默认为 true。
    alwaysOnTop: false, // 指定窗口是否始终在其他窗口之上，默认为 false。
    fullscreen: false, // 指定窗口是否可以进入全屏模式，默认为 true -- 会导致最小化/半屏/关闭按钮隐藏。
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

4.2 向渲染进程Vue暴漏主进程的方法

• 找到项目根目录的preload.js文件

-- preload.js --

/**
 * The preload script runs before. It has access to web APIs
 * as well as Electron's renderer process modules and some
 * polyfilled Node.js functions.
 *
 * https://www.electronjs.org/docs/latest/tutorial/sandbox
 */
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

const { contextBridge, ipcRenderer } = require("electron")

//向渲染进程(vue)暴露一些属性和方法
contextBridge.exposeInMainWorld('versions', {
  // 最小化 / 最小化到系统托盘
  minimize(val) {
    ipcRenderer.send('minimize', val)
  },
  // 窗口最大化
  windowStatus() {
    ipcRenderer.send('windowStatus')
  },
  // 关闭当前窗口
  closeWin() {
    ipcRenderer.send('closeWin')
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

4.3 在Vue项目制定自己想要的菜单，执行主进程暴漏的方法

• 都到Vue了，这个菜单展示形式，样式，展示逻辑等等，岂不是随心所欲的控制，只需在需要的时刻执行主进程暴漏的方法即可。
• 在Vue项目/src下创建header.vue文件，并引入到App.vue中挂载（我这是示例，写的随意而已。）
• 
• 在header.vue加入以下代码 ------- 此时已添加拖拽窗口方法 css代码中的 -webkit-app-region: drag;与-webkit-app-region: no-drag;

<template>
  <div class="header">
    <el-tooltip class="item" effect="dark" content="最小化到系统托盘" placement="bottom">
      <span class="no-drag el-icon-circle-close" @click="addMinimize(false)"></span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="最小化" placement="bottom">
      <span class="no-drag el-icon-minus" @click="addMinimize(true)"></span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="windowStatus ? '窗口化' : '全屏'" placement="bottom">
      <span class="no-drag" :class="windowStatus ? 'el-icon-copy-document' : 'el-icon-full-screen'" @click="addWindowStatus"></span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="关闭程序" placement="bottom">
      <span class="no-drag el-icon-close" @click="addCloseWin"></span>
    </el-tooltip>
  </div>
</template>
<script>
// 来源根目录  preload.js
const versions = window.versions; // electron 暴漏的主进程事件
export default {
  data () {
    return {
      versions, // 主进程暴漏的事件集合  具体看根目录preload.js文件
      windowStatus: false, // 窗口化   true 全屏  false 窗口化
    };
  },
  mounted () { },
  methods: {
    // 最小化 / 最小化到系统托盘
    addMinimize (stata) {
      // true 最小化 false 最小化到系统托盘
      versions.minimize(stata);
    },
    // 窗口最大化/还原
    addWindowStatus () {
      // 窗口状态切换后 -- 切换图标
      this.windowStatus = !this.windowStatus;
      versions.windowStatus();
    },
    addCloseWin () {
      versions.closeWin();
    },
  },
};
</script>
<style lang="less">
.header {
  background-color: pink;
  text-align: right;
  // 鼠标拖拽
  -webkit-app-region: drag;
  span {
    padding: 5px 0;
    font-size: 20px;
    margin-right: 20px;
    color: red;
  }
}
.no-drag {
  // 禁止拖拽
  -webkit-app-region: no-drag;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

4.4 主进程执行渲染进程触发的事件

4.4.1 最小化窗口/全屏/半屏/关闭当前窗口

-- main.js --

const { ipcMain } = require('electron/main')

let mainWindow
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 指定是否显示窗口的默认菜单项。设置为 true 表示显示，默认为 true。
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

// 以下事件来源 preload.js

// 最小化窗口
ipcMain.on('minimize', (ev, val) => {
  // true 最小化 false 最小化到系统托盘
  if (val) {
    mainWindow.minimize();
  } else {
    // mainWindow.hide();
  }
})

// 窗口最大化/还原窗口
ipcMain.on('windowStatus', (ev, val) => {
  // 判断当前窗口状态   true 最大化
  if (mainWindow.isMaximized()) {
    mainWindow.restore(); // 还原窗口大小
  } else {
    mainWindow.maximize(); // 最大化窗口
  }
})

// 关闭当前窗口
ipcMain.on('closeWin', (ev, val) => {
  mainWindow.close();
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

4.4.2 最小化到系统托盘，并制定小菜单

ipcMain.on('minimize', (ev, val) => {
  // true 最小化 false 最小化到系统托盘
  if (val) {
    mainWindow.minimize();
  } else {
    // mainWindow.hide();
  }
})

--- 变为 ---

ipcMain.on('minimize', (ev, val) => {
  // true 最小化 false 最小化到系统托盘
  if (val) {
    mainWindow.minimize();
  } else {
    mainWindow.hide();
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const { app, BrowserWindow, Menu, Tray, shell } = require('electron')

app.whenReady().then(() => {
  let tray = null;
  // 设置最小化到系统托盘后的图标
  tray = new Tray(path.join(__dirname, './icon/icon.jpg'));
  // 设置最小化到系统托盘后的小菜单
  const contextMenu = Menu.buildFromTemplate([
    {
      label: '打开应用', click: () => {
        mainWindow.show();
      }
    },
    {
      label: '项目地址', click: () => {
        shell.openExternal('https://gitee.com/kuxiao-smile/exe-demo');
      }
    },
    { type: 'separator' },
    {
      label: '退出', click: () => {
        app.quit();
      }
    }
  ]);
  // 设置最小化到系统托盘后的悬浮名
  tray.setToolTip('我的应用');
  // 将设置的小菜单 加入菜单模板
  tray.setContextMenu(contextMenu);
  // 系统托盘小图标点击事件
  tray.on('click', () => {
    mainWindow.show(); // 点击系统托盘图标时打开应用程序
  });

  // 创建窗口
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

5 添加浏览器扩展程序

5.1 打开控制台

• 按键盘 ctrl+shift+I,即可打开控制台，但如果想使用Vue扩展就得进行额外配置

5.2 添加Vue扩展程序

app.whenReady().then(async () => {
  // 创建窗口
  createWindow()

  app.on('activate', async () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
  
  // 判断是否生产环境
  // 读取本地浏览器扩展，并添加到控制台  -- 非必要不要使用，会导致浏览器本来装的扩展文件损坏
  if (!app.isPackaged) { // 开发环境启用 vue-devtools 扩展  /nhdogjmejiglipccpnnnanhbledajbpd/6.5.0_0  / 扩展ID/版本号自行修改
    const vueDevToolsPath = path.join(
      os.homedir(),
      '/AppData/Local/Google/Chrome/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/6.5.0_0'
    )
    await session.defaultSession.loadExtension(vueDevToolsPath)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6 添加可执行外部脚本

const { execFile } = require('child_process');

app.whenReady().then(async () => {
  // 创建窗口
  createWindow()

  app.on('activate', async () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
  
  // 执行外部脚本处理文件  -- 无需要 - 可注释
  execFile(path.join(__dirname, '/微信多开.bat').replace(/\\/g, '\\\\'), (error, stdout, stderr) => {
    if (error) {
      console.error(`执行批处理文件时出错：${error.message}`);
      return;
    }
    console.log('批处理文件执行成功');
    console.log('标准输出：', stdout);
    console.error('错误输出：', stderr);
  });})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 微信多开内容

// 根据自己的微信路径自行修改，改完把文件后缀改成bat即可
start D:\WeChat\WeChat.exe
start D:\WeChat\WeChat.exe
1
2
3