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

相关推荐
前端一小卒2 小时前
一个看似“送分”的需求为何翻车?——前端状态机实战指南
前端·javascript·面试
syt_10132 小时前
Object.defineProperty和Proxy实现拦截的区别
开发语言·前端·javascript
长安牧笛2 小时前
儿童屏幕时间管控学习引导系统,核心功能,绑定设备,设时长与时段,识别娱乐,APP超时锁屏,推荐益智内容,生成使用报告,学习达标解锁娱乐
javascript
老前端的功夫2 小时前
Vue 3 vs Vue 2 深度解析:从架构革新到开发体验全面升级
前端·vue.js·架构
栀秋6662 小时前
深入浅出链表操作:从Dummy节点到快慢指针的实战精要
前端·javascript·算法
狗哥哥2 小时前
Vue 3 动态菜单渲染优化实战:从白屏到“零延迟”体验
前端·vue.js
青青很轻_2 小时前
Vue自定义拖拽指令架构解析:从零到一实现元素自由拖拽
前端·javascript·vue.js
xhxxx2 小时前
从被追问到被点赞:我靠“哨兵+快慢指针”展示了面试官真正想看的代码思维
javascript·算法·面试
树下水月3 小时前
纯HTML 调用摄像头 获取拍照后的图片的base64
前端·javascript·html
蜗牛攻城狮3 小时前
Vue 中 `scoped` 样式的实现原理详解
前端·javascript·vue.js