基于vue3+vite的web项目改为Electron桌面应用（一）

一、项目准备

1. clone已有web项目到本地（略）

2. 将web项目打包生成dist文件

pnpm run build:prod

二、electron准备

1. 安装依赖

pnpm install --save-dev electron

2. electron文件配置

1）根目录下创建electron文件夹，并添加main.js、preload.js

2）main.js（作为electron的主进程文件夹）

// 导入模块
const { app, BrowserWindow } = require('electron')
const path = require('path')
// 创建主窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1440,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
	  nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    }
  })
 
  // 和自己本地vue项目启动的地址保持一致 
  mainWindow.loadURL('http://localhost:80')
}
 
// 应用准备就绪，加载窗口
app.whenReady().then(() => {
  createWindow()
 
  // mac 上默认保留一个窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

注意：须将main.js中的此项修改为本地web项目启动地址，否则后续运行electron项目将会出现白屏的情况

3）preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与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])
	}
  })

3. 修改package.json文件

1）删除代码

"type": "module"

 注意：如不删除该代码会报以下错误

2）新增代码

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

4. 启动项目

1）启动 web 项目

pnpm run dev

2）新建终端，启动 electron 项目

pnpm run electron

参考文章：

将web项目打包成electron桌面端教程（二）vue3+vite+ts