将若依前后端分离版的前端打包成EXE的完整解决方案

将若依前后端分离版的Vue前端打包成Windows可执行文件(.exe)，同时保持与后端API的通信，需要使用Electron框架来实现。下面是详细的步骤和解决方案。

一、准备工作

1. 环境要求

• Node.js (推荐v16+)
• npm 或 yarn
• 若依前后端分离版的前端代码
• Git

2. 相关技术栈

• Vue.js (若依前端使用)
• Electron (桌面应用打包框架)
• electron-builder (打包工具)

二、项目改造步骤

1. 安装Electron相关依赖

首先，进入若依前端项目目录，安装Electron相关依赖：

# 进入若依前端项目目录
cd ruoyi-ui

# 安装Electron相关依赖
npm install electron electron-builder --save-dev

# 安装其他必要的依赖
npm install electron-is-dev electron-store --save

2. 创建Electron主进程文件

在项目根目录创建Electron主进程文件：

const { app, BrowserWindow, Menu, shell, dialog } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');
const Store = require('electron-store');

// 初始化配置存储
Store.initRenderer();
const store = new Store();

// 保存主窗口对象的引用
let mainWindow;

// 创建主窗口
function createWindow() {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 800,
    minWidth: 1024,
    minHeight: 768,
    icon: path.join(__dirname, '../public/favicon.ico'),
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: false, // 允许跨域请求
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 加载应用
  if (isDev) {
    // 开发环境下加载开发服务器地址
    mainWindow.loadURL('http://localhost:80');
    // 打开开发者工具
    mainWindow.webContents.openDevTools();
  } else {
    // 生产环境下加载打包后的index.html
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
  }

  // 当窗口关闭时触发
  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  // 创建菜单
  createMenu();
}

// 创建应用菜单
function createMenu() {
  const template = [
    {
      label: '文件',
      submenu: [
        {
          label: '设置API地址',
          click: () => {
            configApiUrl();
          }
        },
        { type: 'separator' },
        {
          label: '退出',
          accelerator: 'CmdOrCtrl+Q',
          click: () => {
            app.quit();
          }
        }
      ]
    },
    {
      label: '编辑',
      submenu: [
        { role: 'undo', label: '撤销' },
        { role: 'redo', label: '重做' },
        { type: 'separator' },
        { role: 'cut', label: '剪切' },
        { role: 'copy', label: '复制' },
        { role: 'paste', label: '粘贴' }
      ]
    },
    {
      label: '视图',
      submenu: [
        { role: 'reload', label: '刷新' },
        { role: 'forceReload', label: '强制刷新' },
        { role: 'toggleDevTools', label: '开发者工具' },
        { type: 'separator' },
        { role: 'resetZoom', label: '实际大小' },
        { role: 'zoomIn', label: '放大' },
        { role: 'zoomOut', label: '缩小' },
        { type: 'separator' },
        { role: 'togglefullscreen', label: '全屏' }
      ]
    },
    {
      label: '帮助',
      submenu: [
        {
          label: '关于',
          click: () => {
            dialog.showMessageBox({
              title: '关于',
              message: '若依管理系统桌面版',
              detail: `版本: ${app.getVersion()}\n若依是一款优秀的开源后台管理系统。`
            });
          }
        },
        {
          label: '访问官网',
          click: () => {
            shell.openExternal('http://ruoyi.vip');
          }
        }
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
}

// 配置API地址
function configApiUrl() {
  // 获取当前API地址
  const currentApiUrl = store.get('apiUrl') || 'http://localhost:8080';

  // 显示输入对话框
  dialog.showInputBox({
    title: '设置API地址',
    label: '请输入后端API地址:',
    value: currentApiUrl,
    inputAttrs: {
      type: 'url'
    },
    buttons: ['确定', '取消'],
    defaultId: 0,
    cancelId: 1
  }).then(result => {
    if (!result.canceled && result.text) {
      // 保存新的API地址
      store.set('apiUrl', result.text);
      
      // 提示用户重启应用
      dialog.showMessageBox({
        type: 'info',
        title: '设置成功',
        message: 'API地址已更新，请重启应用以应用更改。',
        buttons: ['重启', '稍后']
      }).then(res => {
        if (res.response === 0) {
          app.relaunch();
          app.exit(0);
        }
      });
    }
  }).catch(err => {
    console.error('设置API地址出错:', err);
  });
}

// 当Electron完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
  createWindow();

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

// 当所有窗口关闭时退出应用
app.on('wind