Electron - vue项目打包成.exe文件(通过官方demo的方式)

最新推荐文章于 2025-09-30 11:58:31 发布

原创最新推荐文章于 2025-09-30 11:58:31 发布 · 2.2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#electron #vue.js #javascript

一、拉取官方demo (electron-quick-start)

//将electron官网中的 electron-quick-start 拉取到本地 

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

无法访问到github可以直接下载压缩包：

链接: https://pan.baidu.com/s/155m-g5sJ11lsCqwC5_F9oQ?pwd=kbsy 提取码: kbsy

1、成功拉取或下载zip包后目录如下：

2、安装好后，用vscode等开发工具打开，新建终端，输入下面的命令。

下载项目依赖

npm install
或者
npm i

下载打包所需依赖

npm install electron --save-dev
npm install electron-packager --save-dev

package.json 启动命令是自动新增的

npm run start 启动项目

启动成功显示 Hello World!

二、项目打包

注意：

1.前端路由模式更改为hash模式

2.vue.config.js 中publicPath设为 ./

3.vite项目需要将base 设为 ./

将vue项目打包（npm run build）, 会生成一个dist文件

三、修改electron-quick-start 文件

1.删除 electron-quick-start 文件中的index.html，把vue项目打包生成的dist文件放到目录下
2.打开 electron-quick-start 文件里的main.js文件，附上mian.js完整代码
3.重点是：mainWindow.loadFile(“./dist/index.html”) 引用入口文件的路径修改

附带main.js文件内容：

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('./dist/index.html') // 入口文件引入
  // Close the Menu.
  mainWindow.setMenu(null) // 去掉顶部菜单栏
  // Open the DevTools.
  // mainWindow.webContents.openDevTools() // 调试工具
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  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()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

再次执行 ( npm run start ) 启动页面

在 electron-quick-start 项目 package.json 配置文件中，scripts 下添加 packager 打包指令

  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ 测试xxx系统 --platform=win32 --arch=x64 --icon=./dist/favicon.ico --out=./out --overwrite"
  }, // 测试xxx系统 为应用名 icon 为图标路径 可自行修改