Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用

最新推荐文章于 2025-07-14 15:28:16 发布

原创

最新推荐文章于 2025-07-14 15:28:16 发布 · 1.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #前端

})

// 加载 index.html
// mainWindow.loadFile(‘dist/index.html’) 将该行改为下面这一行，加载url
mainWindow.loadURL(“http://localhost:5173”) //这里改成自己的项目启动端口

// 打开开发工具
// mainWindow.webContents.openDevTools()
}

// 这段程序将会在 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()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。


#### 2-2. 同时开启vite和electron服务


为了使vite和electron正常运行，需要先运行vite，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。


此处需要安装两个库：


* concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
* wait-on：等待资源，此处用来等待url可访问


**安装命令为**

yarn add -D concurrently wait-on
或者
npm install -D concurrently wait-on


**接着更新文件package.json，scripts新增两条命令：**

{
“name”: “sd”,
“private”: true,
“version”: “0.0.0”,
“main”: “main.js”,
//“type”: “module”, 创建项目自带的这个要删除,否则会有问题
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“preview”: “vite preview”,
“electron”: “wait-on tcp:5173 && electron .”, //新增更新1(这里改成自己的项目启动端口)
“electron:serve”: “concurrently -k “npm run dev” “npm run electron”” //新增更新2
},
“dependencies”: {
“electron”: “^27.0.0”,
“vue”: “^3.3.4”
},
“devDependencies”: {
“@vitejs/plugin-vue”: “^4.2.3”,
“vite”: “^4.4.5”
}
}


#### 2-3.运行


现已添加两条命令：


* yarn electron为等待tcp协议5173端口可访问，然后执行electron
* yarn electron:serve为阻塞执行开发服务器运行和yarn electron命令


运行项目只要执行命令`yarn electron:serve`或者`npm run ele