vue项目通过Electron打包成exe

转载已于 2025-10-10 21:14:08 修改 · 701 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_41579104/article/details/107340431?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-107340431-blog-121231949.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-ta

文章标签：

#vue.js #前端 #javascript #electron

于 2023-01-09 17:29:33 首次发布

该文章提供了一个Vue+Electron项目打包成exe程序的教程，包括使用镜像加速npminstallelectron的过程，配置main.js以创建和管理应用窗口，以及调整package.json以实现用户选择安装目录的功能。文章强调了在打包过程中可能遇到的慢速问题，并提供了详细步骤来避免常见错误。

首先，说明一下，网上到处都是各种教程，各种抄袭。我搞了三个小时很不容易，只是做个总结，内容全是转载。其次npm i electron很慢，建议镜像，镜像也得个5min左右，做好心理准备，不是报错，只是慢。

第一步：看这个(但是不要复制里面的main.js和package.json文件)

vue+electron将项目打包为exe程序---成功跨过所有坑，完美打包_suoh's Blog的博客-优快云博客_vue 项目打包 electron

第二步：main.js配置，直接复制，没有问题 (重点在中文注释，看你自己想不想要)

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

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1366,
    height: 768,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  // and load the index.html of the app.
  mainWindow.loadFile("index.html");
  //重点在这，这段代码可以删除菜单栏
  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.