创一个vite项目

    npm init vite

安装打包东西

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

electron是开发时运转环境，electron-builder是打包exe用的。

装备桌面环境

翻开 electron 官网，找到“快速开端”。基本上看完这一章就能够实现将页面通过桌面程序运转出来了。

创立 主进程 main.js

项目更目录下创立 main.js文件与 preload.js 文件, 代码能够直接复制官网示例

// 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])
  }
})

增加electron 运转指令

翻开 package.json 在 scrpit 目标中增加 electron 运转指令

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

打包项目，生成dist

运转 npm run build, 生成dist文件。而且将main.js中mainWindow.loadFile途径修正为 ‘./dist/index.html’

    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()
}

最后运转 npm run start

处理资源无法加载

最后运转出来会发现是白屏，翻开程序控制台能够看到是js文件找不到。
翻开dist中index.html发现是js和css途径都是绝对途径，所以这儿需求修正为相对途径。

翻开 vite.config.js 装备更途径为相对途径

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

然后重新打包，再运转npm run start 就能够看到页面了。

开发环境：热更新

这儿在开发环境中有一个问题便是，咱们这儿的烘托进程是打包好的dist文件，无法每次修正后热更新。只有重新打包生成新的dist后页面才会更新。这在开发的时分显然是方便的。

两个东西 concurrently wait-on

    npm i concurrently -D
    npm i wait-on -D
  • concurrently：方便 script 同时发动多个指令
  • wait-on：它能够等候文件、端口、套接字和 http(s) 资源可用后触发。

开发时热更新，咱们就要放弃build一个dist文件来作为烘托进程的做法了。
简单来说，咱们正常履行 npm run dev 生成一个页面服务，这样的环境是有热更新的。所以咱们只需求在主进程中加载dev服务中的页面作为烘托进程就能够了。
修正一下主进程 main.js

    ...
    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()
    };
    ...

然后翻开两个终端，第一个先履行 npm run dev，等候服务发动后在另外一个里履行npm run start 即可。

当然咱们也能够一个指令完结这些。在package.json中增加指令：

    ...
    "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-dev 即可。

打包exe

增加打包指令

    ...
    "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"
      },
    ...

履行 npm run exe-build ，等候履行完毕，dist文件夹下会多一个win-unpacked，其里面有一个exe文件便是咱们的程序履行文件。

现在咱们加载的仍是dev服务，所以还需求修正一下主进程main.js

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

app.isPackaged 首要用来判别是否为开发环境。

处理index.html找不到的问题

咱们翻开win-unpacked，履行exe文件，会发现页面没有内容，翻开F12控制台，发现index.html根本没有找到。

其地址 …dist/win-unpacked/resources/app.asar/dist/index.html，找不到的原因能够大约猜一下是咱们的页面没有打包进app.asar中。

所以咱们能够在electron-builder打包装备中设置一下咱们要打包的文件。

项目更目录创立 electron.config.json

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

这儿咱们设置了files字段，其目的便是设置打包的数据内容。
productName 便是设置exe文件的文件名。

然后修正exe-build指令

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

运转指令后，能够看到exe文件已经修正为test.exe。双击运转也能够看到页面了。

最后完善一下打包指令

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