Electron:Electron整合vue

主要思路:分别启动两个进程,一个是vue,另一个是electron。然后在electron通过loadURL去引入vue的主页面。但怎么才能将这两个项目整合成一键启动呢?请看后文!

vue几个插件

json 复制代码
electron:用前端技术开发桌面应用的框架
electron-builder:electron打包框架

concurrently:可以同时执行多个命令
wait-on:监听某个端口是否有服务,有服务则放行,没服务则阻塞

cross-env:设置和读取环境变量,实现类似于springboot的profile功能

整合成一键启动

json 复制代码
"scripts": {
	// 将启动vite和electron整合成一条命令,一键启动
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
    // vite项目是用3000端口,监听3000端口执行vite运行成功,然后在启动electron
    "electron": "wait-on tcp:3000 && cross-env NODE_ENV=dev electron .",
    // 启动vite项目
    "dev": "vite"
  }

打包

TODO

相关推荐
NEXT0619 小时前
深拷贝与浅拷贝的区别
前端·javascript·面试
PieroPc19 小时前
用html+css+js 写一个Docker 教程
javascript·css·docker·html
倚肆19 小时前
WebSocket连接教程示例(Spring Boot + STOMP + SockJS + Vue)
vue.js·spring boot·websocket
Joker Zxc20 小时前
【前端基础(Javascript部分)】1、JavaScript的基础知识(组成、应用、编写方式、注释)
开发语言·前端·javascript
Lee川20 小时前
深入浅出:从JavaScript内存模型理解“深拷贝”的必要性与实现
javascript
用户57573033462420 小时前
🔥 面试官:手写 Promise 封装 AJAX?这 5 个考点 90% 的人跪了!
javascript
上单带刀不带妹20 小时前
【Axios 实战】网络图片地址转 File 对象,附跨域解决方案
开发语言·前端·javascript·vue
SuperEugene20 小时前
前端模块化与 import/export入门:从「乱成一团」到「清晰可维护」
前端·javascript·面试·vue
程序员林北北20 小时前
【前端进阶之旅】Vue3 + Three.js 实战:从零构建交互式 3D 立方体场景
前端·javascript·vue.js·react.js·3d·typescript
岱宗夫up20 小时前
【前端基础】HTML + CSS + JavaScript 基础(二)
开发语言·前端·javascript·css·架构·前端框架·html