Electron-与Vue合并实现热重载

最新推荐文章于 2024-10-08 13:00:00 发布

繁花灬落幕

最新推荐文章于 2024-10-08 13:00:00 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/yjl15517377095/article/details/104478110

版权

前言

electron 项目通常使用 loadFile 加载前端项目：

mainWindow.loadFile('./dist/index.html')

这使得每更新一次项目都需要 build --> electron .，非常耗时，其实 electron 还有 loadURL 命令，只要启动一次 vue 调试和 electron 调试，将 URL 指向 vue 调试路径，就可以实现热重载

同时在网页中会报错的 nodeJs 命令，在 electron 窗口中能完美运行

实现

修改 electron 加载路径配置

mainWindow.loadURL(`http://localhost:8080`)

要想 vue 和 electron “一键启动”，直接用 && 是不能实现的，因为两个脚本都会挂起，无法串联执行，只能并联执行，依靠 concurrently 插件

npm i concurrently --save

修改 package.json

{
  "main": "main.js",  // 注意不要漏掉这个 electron 入口文件配置
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron-start": "electron .",
    "start": "concurrently \"npm run serve\" \"npm run electron-start\" "  // 一键启动
  }
}