Vue项目使用electron打包桌面应用方式

electron_mirror=https://npmmirror.com/mirrors/electron/
electron-builder-binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

npm install -d electron

npm install -d electron@28.0.0

//国内镜像源安装 cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com
//cnpm安装electron
cnpm install -d electron

const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;

function createWindow() {
  Menu.setApplicationMenu(null);
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    show: false,
    minWidth: 1440,
    minHeight: 900,
    webPreferences: {
      partition: String(+new Date()),
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true,
      contextIsolation: false
    },
  });

  mainWindow.maximize();
  mainWindow.show();
  // 如果是开发环境就把当前运行的web端口做成客户端预览
  // 如果是生产环境就把打包后的index做成客户端预览
  mainWindow.loadURL(
    NODE_ENV === "development"
      ? "http://localhost:8089"
      : `file://${path.join(__dirname, "../dist/index.html")}`
  );

  if (NODE_ENV === "development") {
    mainWindow.webContents.openDevTools(); // 打开开发者工具
  }
}

// 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用,部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow();

  app.on("activate", function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});
 

//使用JavaScript在Electron环境中动态替换HTML元素文本，显示Chrome、Node.js和Electron的版本信息：
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
 

"type": "module"

"main": "electron/main.js"

npm install -d electron-builder

npm install -d electron-builder@26.0.12

cnpm install -d electron-builder

{
  "description": "app",
  "author": {
    "name": "xxx",
    "email": "xxx@qq.com.cn"
  },
  "scripts": {
    "electron:build": "vite build && electron-builder",
  },
  "build": {
    "appId": "xxx.app",
    "productName": "应用名称",
    "copyright": "Copyright © 2023",
    "directories": {
      "output": "dist_electron"  //打包后的文件夹
    },
    "win": {
      "icon": "/build/icons/icon.ico"  //应用图标，有需要就加，根目录下build文件夹
    },
    "mac": {
      "icon": "/build/icons/icon.icns"
    },
    "linux": {
      "icon": "/build/icons/icon.png"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "files": [
      "./dist",
      "./electron",
      "!**/node_modules/**"
    ],
    "asar": false,
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  }
}
 

base: "./"

npm run electron:build