使用vue3和vite创建vue的项目然后引入electron
创建Vite项目
npm create vite@latest electron-desktop-tool
进入到项目 执行安装和运行命令，可以看到vue项目已经启动起来了
cd electron-desktop-tool
npm install
npm run dev
项目可以在浏览器中跑起来，说明没毛病，下一步就在项目中引入 electron
引入electron 到项目中
npm install -D electron electron-builder electron-devtools-installer
vite-plugin-electron
创建项目入口——主进程
electron引入成功了，可以开始写electron的相关代码了，新建一个src-electron 文件用来写electron的代码，在它下面创建一个 main.js文件 用来写主进程代码
const { app, BrowserWindow } = require('electron');
const path = require('path');
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
},
});
mainWindow.loadURL("http://localhost:3000")
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
})
})
配置插件入口
配置：vite-plugin-electron
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
electron({
// 主进程入口文件
entry: './src-electron/main.js'
})
],
/*开发服务器选项*/
server: {
// 端口
port: 3000,
}
})
配置package.json
在package.json把"type": "module", 删除掉并且配置main字段
// main字段配置为 electron主进程文件路径
"main": "./src-electron/main.js",
electron 启动
运行 npm run dev 启动项目
VSCode中配置运行项
- 现在package.json中配置scripts
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"electron:serve": "vite --host",
"electron:build": "vite build && electron-builder"
}
- 配置Vscode项目的launcher.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "electron:serve"],
"cwd": "${workspaceFolder}"
}
]
}
