最简洁Vue+Electron项目搭建教程

开发环境

node: v14.19.3
npm: 6.14.17
Vue CLI: v5.0.8

创建 Vue 项目

正常创建vue项目，并能成功运行

# 创建项目
vue create project
# 检查项目
cd project
npm run serve 

配置 Electron

1. 安装依赖

## 添加 electron 构建工具
vue add electron-builder
# 添加 electron
npm install electron

2. 配置 package.json

  "scripts": {
    "electron:serve": "vue-cli-service electron:serve",
    "electron:build": "vue-cli-service electron:build",
  },

3. 创建 electron 入口文件

文件位置在 src 下面
文件名一定要是 background.js

# 参考代码
const { app, BrowserWindow } = require("electron"); //引入electron
let win;
let windowConfig = {
  width: 800,
  height: 600,
}; //窗口配置程序运行窗口的大小
function createWindow() {
  win = new BrowserWindow(windowConfig); //创建一个窗口
  // win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.html
  win.loadURL("http://127.0.0.1:8080"); //在窗口内要展示的内容index.html 就是打包生成的index.html
  win.webContents.openDevTools(); //开启调试工具
  win.on("close", () => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on("resize", () => {
    win.reload();
  });
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
  app.quit();
});
app.on("activate", () => {
  if (win == null) {
    createWindow();
  }
});