vue+electron 桌面窗体开发

浪漫九州

已于 2024-03-21 08:36:15 修改

阅读量118

点赞数

分类专栏： vue 文章标签： vue.js electron javascript

于 2023-11-09 09:41:12 首次发布

本文链接：https://blog.csdn.net/m0_59631482/article/details/134303148

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.下载vue项目Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程-CSDN博客

npm init vue@latest

2.安装Electron

npm install electron --save-dev

下载与配置electron镜像

在项目根目录新建 .npmrc，内容：

electron_mirror=https://npmmirror.com/mirrors/electron/

或者

npm config set registry=https://registry.npmmirror.com
npm config set disturl=https://registry.npmmirror.com/-/binary/node
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron

3.创建main.js/ts文件（与src同级）

加载动画

给vue+Electron的项目加一个加载页面loadpage | 码农家园

拖拽窗体

const { app, BrowserWindow, Menu, screen ,ipcMain, Tray} = require('electron')
const path = require("path")
// 是否是生产环境
const isPackaged = app.isPackaged;

// 禁止显示默认菜单
Menu.setApplicationMenu(null);
//刷新托盘定时器
let flashIconTimer
// 主窗口
let mainWindow;

const createWindow = () => {
   mainWindow = new BrowserWindow({
      // 默认窗口标题，如果由loadURL()加载的HTML文件中含有标签<title>，此属性将被忽略。
      title: "Electron + Vue3",
      width: 800,
      height: 600,
      // 设置窗口尺寸为屏幕工作区尺寸
      // width: screen.getPrimaryDisplay().workAreaSize.width,
      // height: screen.getPrimaryDisplay().workAreaSize.height,
      // 设置最小尺寸
      minWidth: 800,
      minHeight: 600,
      // 窗口图标。 在 Windows 上推荐使用 ICO 图标来获得最佳的视觉效果, 默认使用可执行文件的图标.
      // 在根目录中新建 public 文件夹存放图标等文件
      icon: path.resolve(__dirname, "./public/favicon.ico"),
    })
    // 主要改了这里
    // mainWindow.loadFile(path.join(__dirname, "./index.html"));
    // 使用 loadURL 加载 http://localhost:3004 ，也就是我们刚才创建的 Vue 项目地址
    // 3004 改为你 Vue 项目的端口号
    // 如果使用了 nginx 代理，url 改为代理地址
    //mainWindow.loadURL("https://example.com/")
    if (!isPackaged) {
       // 开发环境下，打开开发者工具。
       mainWindow.webContents.openDevTools();
       mainWindow.loadURL("http://127.0.0.1:5173");
     }else{
      //打包
       mainWindow.loadURL(`file://${path.join(__dirname, "./dist/index.html")}`);
     }

     ipcMain.on("min", () => {
      mainWindow.minimize();
    });

    ipcMain.on("max", () => {
      if (mainWindow.isMaximized()) {
        mainWindow.unmaximize();
      } else {
        mainWindow.maximize();
      }
    });
  
    // 只是隐藏任务栏
    // ipcMain.on("close", () => {
    //   hideMain(mainWindow);
    // });

    //只是隐藏任务栏
    mainWindow.on('close', (event) => {
      mainWindow.hide();
      mainWindow.setSkipTaskbar(true);
      event.preventDefault();
    });

  // 闪烁任务栏
  ipcMain.on("flashFrame", () => {
    mainWindow.flashFrame(true);
  });

  let iconPath = "./public/favicon.ico";
  let emptyIconPath = "./public/empty.ico";
  const appIcon = createTray(mainWindow, iconPath);
   // 闪烁任务栏
   ipcMain.on("flashIcon", () => {
    if (!mainWindow.isVisible()) {
      clearFlashIconTimer();
      let count = 0;
      flashIconTimer = setInterval(function () {
        count++;
        if (count % 2 === 0) {
          appIcon.setImage(path.join(__dirname, emptyIconPath));
        } else {
          appIcon.setImage(path.join(__dirname, iconPath));
        }
      }, 500);
    }
  });
  ipcMain.on("clearFlashIcon", () => {
    clearFlashIconTimer();
    appIcon.setImage(path.join(__dirname, iconPath));
  });
}
/**
 * 创建托盘图标
 * @param mainWindow
 * @param iconPath
 */
 function createTray(mainWindow, iconPath) {
  // 托盘
  const appIcon = new Tray(path.join(__dirname, iconPath));
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "显示",
      click: function () {
        showMain(mainWindow, appIcon, iconPath);
      },
    },
    {
      label: "退出",
      click: function () {
        //app.quit();
        mainWindow.destroy();//我们需要在这里有一个真正的退出（这里直接强制退出）
      },
    },
  ]);
  appIcon.setToolTip("wenjun");
  appIcon.setContextMenu(contextMenu);
  appIcon.on("click", function () {
    showMain(mainWindow, appIcon, iconPath);
  });

  return appIcon;
}
/**
 * 展示窗口，打开任务栏
 */
 function showMain(mainWindow, appIcon, iconPath) {
  console.log("showMain");
  console.log("flashIconTimer", flashIconTimer);
  mainWindow.setSkipTaskbar(false);
  mainWindow.show();
  clearFlashIconTimer();
  appIcon.setImage(path.join(__dirname, iconPath));
}

/**
 * 清除图片闪烁的定时器
 */
function clearFlashIconTimer() {
  if (flashIconTimer) {
    clearInterval(flashIconTimer);
  }
}

/**
 * 隐藏窗口，隐藏任务栏
 */
function hideMain(mainWindow) {
  mainWindow.setSkipTaskbar(true);
  mainWindow.hide();
}


app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

// 如果开发环境使用了 nginx 代理，禁止证书报错
if (!isPackaged) {
  // 证书的链接验证失败时，触发该事件
  app.on(
    "certificate-error",
    function (event, webContents, url, error, certificate, callback) {
      event.preventDefault();
      callback(true);
    }
  );
}

4.安装concurrently

 npm install concurrently --save-dev

5.package.json配置


{  ...
   "main": "main.js",
  "description": "网才无忧是专业高效的人才推荐平台，为企业解决中高端岗位人才需求和急招难找的岗位人才提供全方位的招聘解决方案；为社会职场人士的求职发展和大学生实习就业提供海量的职位；求职找工作注册网才无忧，人才简历委托人才推荐官，让工作找上门；从此告别找工作海投的痛苦；中高端岗位人才招聘，急招难找岗位人才；就找网才无忧，更低成本更低风险的猎头式人才推荐服务人才主动推荐，从此告别简历搜索的痛苦！",
  "author": {
    "name": "wenjun",
    "email": "582248384@qq.com"
  },
      
   "scripts": {
    "electron:dev": "concurrently vite \"electron .\"",
    "package": "electron-forge package",
    "make": "electron-forge make"
   },
    "config ":{
    ...
    }
}

相关配置全貌 package.json 的 config

 "config": {
    "forge": {
      "packagerConfig": {
        "appVersion": "1.0.0",
        "name": "网才无忧",
        "appCopyright": "wenjun(582248384@qq.com)",
        "icon": "./public/electron",
        "win32metadata": {
          "ProductName": "网才无忧",
          "CompanyName": "wangcaiwuyou.com",
          "FileDescription": "网才无忧招聘网"
        }
      },
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_demo"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }

6.运行

npm run electron:dev

7.部署问题

ebSocket connection to 'wss://example.com/' failed:
WebSocket connection to 'wss://localhost:3004/' failed:
[vite] failed to connect to websocket.
your current setup:
(browser) example.com/ <--[HTTP]--> localhost:3004/ (server)
(browser) example.com:/ <--[WebSocket (failing)]--> localhost:3004/ (server)

server {
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        ...
    }
}

8.打包exe程序

方法1

npm install --save-dev @electron-forge/cli
npx electron-forge import

执行make之前先执行

npm run package

npm run make
cnpm run make

方法2

npm install electron-packager -g

配置

Electron登录注册桌面应用源码+安装文件的打包方法 - 为之网

“scripts”: {
“start”: “electron .”,
“pack”: “electron-packager . myClient --win --out …/myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0”
}