Electron-与Vue合并实现热重载

前言

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

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

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

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

实现

1. 修改 electron 加载路径配置

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

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

npm i concurrently --save

3. 修改 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\" "  // 一键启动
  }
}

4. 需要引入的 nodejs / electron 模块需要在 index.html 用 require 引入，其他地方可能找不到