2-vite+vue3接入electron

vite创建vue3项目,使用electron

• npm create vite
• npm i
• npm i electron -D

安装包 启动 vue项目并启动 electron

• npm i concurrently
  • 配置命令: "dev": "concurrently \"vite\" \"electron .\""

根目录创建

• electron/main.cjs -package.json
  • "main": "electron/main.cjs",
  • cjs是使用commonjs规范

// electron 配置文件
const { BrowserWindow, app } = require('electron')

const createWin = () => {
    const win = new BrowserWindow({
        width: 300,
        height: 300,
        alwaysOnTop: true,//窗口置顶
        x: 700
    })
    // =>把本地启动的服务的链接嵌入
    win.loadURL('http://localhost:5173/')
}

app.whenReady().then(() => {
    createWin();
})

启动项目

• npm run dev 启动如下所示: