vite+ vue3项目添加electron，并electron打包教程，以及electron代码热重载页面

前提条件，新建好vite+vue3项目。创建vite+vue3项目教程

1.安装electron,通过npm下载electron 需要全局安装

pnpm i -s electron -D

2.在根目录中新建一个electron文件夹，在文件夹中新建main.js

3.修改package.json文件

1. 删除type字段，不然运行会报错
2. 然后添加"main": "electron/main.js","electron/main.js"为electron文件中main的路径
3. 在scripts字段中添加启动electron的命令，"electrone:dev": "electron ."

4.在electronx文件夹下的main.js中加入以下代码

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true // 关闭控制台的警告
 
function createWindow() {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 书写渲染进程中的配置
      nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    },
  })
 
  // 监听html
  mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'))
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()
 
  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

现在启动程序pnpm run electrone:dev会得到一片空白，展示如下页面，因为现在监听的是vue打包后的dist文件夹中的index.html

5.配置加载代码热更新

1. 下载electron-reload

   pnpm i electron-reload

2. 在electron文件下main文件下加入如下代码，

// 配置热更新 
let env = 'pro'
 
  if (env == 'pro') {
    const elePath = path.join(__dirname, '../node_modules/electron')
    require('electron-reload')('../', {
      electron: require(elePath),
    })
    // 热更新监听窗口
    mainWindow.loadURL('http://localhost:8888')
    // 打开开发工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生产环境中要加载文件，打包的版本
    // Menu.setApplicationMenu(null)
    // 加载 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
  }

3. 全部代码如下

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
 
function createWindow() {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 书写渲染进程中的配置
      nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    },
  })
 
  let env = 'pro2'
  // 配置热更新
  if (env == 'pro') {
    const elePath = path.join(__dirname, '../node_modules/electron')
    require('electron-reload')('../', {
      electron: require(elePath),
    })
    // 热更新监听窗口
    mainWindow.loadURL('http://localhost:8888')
    // 打开开发工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生产环境中要加载文件，打包的版本
    // Menu.setApplicationMenu(null)
    // 加载 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
  }
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()
 
  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

4.其中的env是阀门方便打包成app，开发中热更新就使用env=pro就好了，因为监听的是8888端口，所以我们需要去更改vue的运行端口，在根目录vite.config.js中加入以下代码

server: {
    port: 8888,
    cors: true, // 允许跨域
    hmr: true, // 开启热更新
  },

5.开启两个终端，一个终端运行vue的项目启动 因为我的是默认配置 所以是 pnpm run dev

另一个终端运行 pnpm run electrone:dev,这个时候你就发现，代码可以热更新了，一定要先启动vue项目，然后再启动electrone项目，不然页面为空白页没有内容，这样就跑起来项目了

6.打包成APP

1.electron打包需要打包插件，我这里使用的是electron-builder 需要全局安装

pnpm i electron-builder -D

2.在vite.config.js中更改根路径，新增base,防止vite打包后的页面运行出现空白

3.在package.json中新增打包命令

"electron:build": "vite build & electron-builder build --config electron-builder.json"

4.在src同级目录中新建打包配置文件electron-builder.json，在里面加入以下代码

{
  "productName": "app名字",
  "files": ["./electron/main.js", "./dist"],
  "extraFiles": ["./videos", "./cvideo"], 
  "directories": {
    "output": "./buileder"
  }
}

5.打包前要在main.js中的env改成非pro 可以是pro2或者其他都可以，不是pro就行

6.运行打包命令

pnpm run electron:build 

7.打包成功后会在目录中生成一个builder文件夹，app就在里面

拿到这个文件，打包就算成功了。

注：打包时如于以下报错，Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json. 解决方法：

这个错误信息表示在 package.json 文件中，electron 应该被列在 devDependencies 而不是 dependencies 中。这是因为 electron 应该只在开发环境中使用，而不是在生产环境中使用。

为了解决这个问题，你可以将 electron 移动到 devDependencies 中，然后重新安装依赖项。例如，在你的 package.json 文件中，你可以将类似下面的行：

"dependencies": {
  "electron": "^28.1.4",
  ...
}
更改为：

"devDependencies": {
  "electron": "^28.1.4",
  ...
}
然后在终端中运行 pnpm install 命令来重新安装依赖项。这将确保 electron 只在开发环境中使用，并且不会在生产环境中被打包到应用程序中。

8.控制状态栏是否显示，在main.js中写控制代码：

7.自定义窗口最大，最小，关闭按钮

1.在文件electron/main.js中添加事件代码：

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
 
function createWindow() {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 1300,
    height: 800,
    minWidth:1250,
    frame: false, // 去掉窗口边框
    titleBarStyle: 'hidden', // 隐藏标题栏
    webPreferences: {
      // 书写渲染进程中的配置
      nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
      webSecurity: true, // 禁用 Electron 的安全策略
    },
  })
 
  let env = 'pro2';
  // 配置热更新
  if (env == 'pro') {
    const elePath = path.join(__dirname,'../node_modules/electron')
    require('electron-reload')('../', {
      electron: require(elePath),
    })
    // 热更新监听窗口
    mainWindow.loadURL('http://localhost:8888')
    // 打开开发工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生产环境中要加载文件，打包的版本
    // Menu.setApplicationMenu(null)
    // 加载 index.html
    // mainWindow.loadURL('http://localhost:8888')
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
  }
}
 
 
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()
 
  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
 
 
// ipcMain.handle("setIgnoreMouseEvents", (event, ignore) => {
//   if (ignore) (win).setIgnoreMouseEvents(true, { forward: true });
//   else (win).setIgnoreMouseEvents(false);
// });
 
// ipcMain.handle("hideWindow", (event) => {
//   (win).hide();
//   runExec('close') //关闭后台服务 
// });
// //自定义最小化
ipcMain.on('window-min', () => {
  // 窗口最小化
  BrowserWindow.getFocusedWindow().minimize()
})
// //自定义最大化
ipcMain.on('window-max', (event, obj) => {
  // 窗口最大化 如果是最大化就取消最大化
  if (BrowserWindow.getFocusedWindow().isMaximized()) {
    // 取消最大化并设置窗口尺寸
    BrowserWindow.getFocusedWindow().unmaximize()
    BrowserWindow.getFocusedWindow().setSize(1300, 800)
    // obj.max = false
  }
  // 窗口不是最大化就进行最大化
  else {
    BrowserWindow.getFocusedWindow().maximize()
    // obj.max = true
  }
})
// //自定义关闭
ipcMain.on('window-close', () => {
  // 窗口关闭
  BrowserWindow.getFocusedWindow().close()
  app.quit()
})

2.在你使用的页面调用响应事件

<template>
    <div @click="min()">缩小</div>
    <div @click="max()">放大</div>
    <div @click="close()">关闭</div>
</template>
 
<script setup>
    const { ipcRenderer } = require('electron')
 
 
    const min = () => {
      //最小化
      ipcRenderer.send("window-min");   //window-min要和main.js文件中对应的相同
    };
    const max = () => {
      //最大化
      ipcRenderer.send("window-max");
    };
    const close = () => {
      //关闭
      ElMessageBox.confirm('当前操作会关闭此程序，是否继续?', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      })
      .then(() => {
        ipcRenderer.send("window-close");
      })
      .catch(() => {
        // catch error
      })
    };
</script>

补充（# vue+vite+electron项目打包成Mac，Windows安装包）

要将使用 Vite 构建的 Vue.js 项目打包为 Windows 和 macOS 平台的可执行文件，可以使用 electron-builder 进行打包。electron-builder 是一个基于 Electron 的构建工具，可以轻松地将应用程序打包成可执行文件和安装程序，支持 Windows、macOS 和 Linux 平台。

1.先安装electron-builder 和 electron 依赖

pnpm install electron-builder electron --save-dev

2.在 package.json 文件中添加以下脚本：

"scripts": {
  "build": "vite build && electron-builder",
  "build:win": "vite build && electron-builder --win",
  "build:mac": "vite build && electron-builder --mac"
}

上述代码中，vite build 命令用于构建 Vue.js 应用程序，electron-builder 命令用于将应用程序打包成可执行文件。build 脚本将打包出支持所有平台的应用程序，build:win 脚本将打包出支持 Windows 平台的应用程序，build:mac 脚本将打包出支持 macOS 平台的应用程序。

3.在项目根目录下创建 electron-builder.json 文件，用于配置打包选项：

{
  "productName": "my-app-electron",
  "appId": "com.electron.myapp",
  "directories": {
    "output": "dist"
  },
  "files": [
    "dist/**/*",
    "package.json"
  ],
  "extraMetadata": {
    "main": "dist/main/index.js"
  },
  "mac": {
    "target": "dmg",
    "icon": "build/icon.icns"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  }
}

上述代码中，productName 表示应用程序的名称，appId 表示应用程序的唯一标识符，directories.output 表示打包输出目录。files 属性指定需要打包的文件，这里包括 dist 目录下的所有文件和 package.json 文件。extraMetadata 属性指定入口文件的路径，这里是 dist/main/index.js。mac 和 win 属性分别指定打包选项，例如应用程序的图标和目标文件格式。

最后，运行以下命令进行打包： npm run build:win // 打包 Windows 平台的应用程序 npm run build:mac // 打包 macOS 平台的应用程序 打包完成后，可执行文件会输出到 dist 目录下。

以上是将使用 Vite 构建的 Vue.js 项目打包为 Windows 和 macOS 平台可执行文件的示例代码。需要注意的是，如果你的 Vue.js 项目使用了一些特殊的依赖或功能，可能需要进行额外的配置和处理。