electron 打包桌面程序

一、步骤概述

1. 创建 Vue 3 应用程序

   • 使用 Vue CLI 或手动创建一个 Vue 3 项目。

2. 安装 Electron

   • 添加 Electron 作为开发依赖项到你的项目中。

3. 创建主进程

   • 在 Electron 中，你需要一个主进程来控制你的应用程序。主进程通常是一个 Node.js 脚本。

4. 集成 Vue 应用

   • 在 Electron 的主进程中，加载 Vue 应用作为渲染进程。

5. 打包应用

   • 使用 Electron 提供的打包工具将应用程序打包成可执行文件。

二、具体步骤 

1. 创建 Vue 3 应用程序

使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create my-vue-app
cd my-vue-app
 

2. 安装 Electron

在项目根目录下，安装 Electron：

npm install electron --save-dev

3. 创建主进程

在项目根目录下创建 main.js 文件作为 Electron 的主进程脚本：

const { app, BrowserWindow, ipcMain, screen } = require('electron'); 
function createWindow() {
  const { width, height } = screen.getPrimaryDisplay().bounds;
  const win = new BrowserWindow({
    width: width,  //全屏
    height: height, //全屏
    webPreferences: {
      nodeIntegration: true, // 允许在渲染进程中使用 Node.js APIs
      contextIsolation: false, // 禁用上下文隔离以使用 require
      devTools: false ,// 禁用开发者工具
      // nodeIntegration: true
    }
  });

  // 加载 Vue 应用
  win.loadURL('https://pc.chinazhuochen.com'); // 注意替换为你的 Vue 项目运行的地址

  // 打开开发者工具
  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

修改vite.config.ts文件

将vite.config.ts修改成vite.config.mts

4. 调整 Vue 应用配置

确保你的 Vue 应用的 package.json 中的 main 字段指向 Electron 主进程的入口文件：

5. 打包应用

安装 Electron 打包工具 electron-builder：

npm install electron-builder --save-dev

在项目根目录下创建并配置 electron-builder 的配置文件 electron-builder.json：

/** electron-builder.json */

{
	"files": ["dist/**/*", "dist-electron/**/*","main.js"], // 设置需要打包的文件main.js必须要有不然会报找不到这个文件的错误
	"directories": {
		"output": "release" // 设置出口文件
	}
}

main.js必须配置不然会报错

5. 打包

npm run electron:build

在项目根目录下面会有release文件，双击里面.exe文件就可