vite + electron-builder 打包配置详解

    npm init vite

    npm i -D electron               // 20.1.0
    npm i -D electron-builder       // 23.3.3

// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 加载 index.html
  mainWindow.loadFile('index.html')
  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    // 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()
  })
})
// 除了 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', () => {
  if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件，然后用 require 导入。

// preload.js
// All the Node.js APIs are available in the preload process.
// 它拥有与Chrome扩展一样的沙盒。
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])
  }
})

    "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron .",
  },

    const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '/preload.js')
    }
  })
  // 加载 index.html
  // mainWindow.loadFile('index.html')
  mainWindow.loadFile('./dist/index.html')
  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

export default defineConfig({
  plugins: [vue()],
  base: './',
})

    npm i concurrently -D
    npm i wait-on -D

    ...
    const createWindow = () => {
      // Create the browser window.
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          preload: path.join(__dirname, "/preload.js"),
        },
      });
      // 加载 index.html
      mainWindow.loadURL("http://localhost:3333/");
      // 打开开发工具
      // mainWindow.webContents.openDevTools()
    };
    ...

    ...
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview",
        "start": "electron .",
        "electron": "wait-on tcp:3333 && electron .",
        "exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\""
      },
    ...

    ...
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview",
        "start": "electron .",
        "electron": "wait-on tcp:3333 && electron .",
        "exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\"",
        "exe-build": "electron-builder"
      },
    ...

    ...
      // 加载 index.html
      // 判断当前是否为开发环境
      console.log("isPackaged: ", app.isPackaged);
      if (!app.isPackaged) {
        mainWindow.loadURL("http://localhost:3333/");
      } else {
        mainWindow.loadFile("./dist/index.html");
      }
    ...

{
  "files": ["main.js", "preload.js", "./dist"],
  "productName": "test"
}

    "exe-build": "electron-builder -config electron.config.json"

    "exe-build": "vite build & electron-builder -config electron.config.json"