npm i electron -D

// 控制應用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow() {
  // 創(chuàng)建瀏覽器窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 書寫渲染進程中的配置
      nodeIntegration: true, //開啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    },
  })
    // 加載 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
}
// 這段程序將會在 Electron 結束初始化
// 和創(chuàng)建瀏覽器窗口的時候調用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 通常在 macOS 上，當點擊 dock 中的應用程序圖標時，如果沒有其他
    // 打開的窗口，那么程序會重新創(chuàng)建一個窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當所有窗口都被關閉的時候退出程序。 因此，通常對程序和它們在
// 任務欄上的圖標來說，應當保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

"main": "electron/main.js",

npm i electron-reload

"electron:dev": "set ELECTRON_ENV=development& electron .",

// 控制應用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow() {
  // 創(chuàng)建瀏覽器窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 書寫渲染進程中的配置
      nodeIntegration: true, //開啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    },
  })
  console.log("process.env.ELECTRON_ENV", process.env.ELECTRON_ENV)
  // let env = 'pro'
  let env = process.env.ELECTRON_ENV
  // 環(huán)境變量 ELECTRON_ENV 值為 development 則使用熱更新
  // 配置熱更新
  if (env == 'development') {
    const elePath = path.join(__dirname, '../node_modules/electron')
    require('electron-reload')('../', {
      electron: require(elePath),
    })
    // 熱更新監(jiān)聽窗口
    mainWindow.loadURL('http://localhost:3100')
    // 打開開發(fā)工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生產環(huán)境中要加載文件，打包的版本
    Menu.setApplicationMenu(null)
    // 加載 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
  }
}
// 這段程序將會在 Electron 結束初始化
// 和創(chuàng)建瀏覽器窗口的時候調用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 通常在 macOS 上，當點擊 dock 中的應用程序圖標時，如果沒有其他
    // 打開的窗口，那么程序會重新創(chuàng)建一個窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當所有窗口都被關閉的時候退出程序。 因此，通常對程序和它們在
// 任務欄上的圖標來說，應當保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

npm i electron-builder -D

"electron:build": "vite build --mode application & electron-builder build --config electron-builder.json",

{
  "appId": "com.example.myapp",
  "productName": "app名字",
  "files": ["./electron/main.js", "./dist"],
  "extraFiles": ["./videos", "./cvideo"], 
  "directories": {
    "output": "./buileder"
  },
  "nsis": {
    "oneClick": false,
    "perMachine": true,
    "allowToChangeInstallationDirectory": true
  },
  "win": {
    "icon": "public/icon.png",
    "target": ["nsis", "zip"]
  },
  "mac": {
    "icon": "public/icon.png",
    "target": "dmg"
  },
  "linux": {
    "icon": "public/icon.png",
    "target": "AppImage"
  },
  "dmg": {
    "contents": [
      {
        "x": 110,
        "y": 150
      },
      {
        "x": 240,
        "y": 150,
        "type": "link",
        "path": "/Applications"
      }
    ]
  },
  "appx": {
    "publisher": "CN=app名字"
  }
}

npm run electron:build 

export default defineConfig({
  base: './',
})

<base href="/" rel="external nofollow" >