admin 发布的文章

对独立开发者来说，“第一个 100 用户” 从来不是简单的数字增长，而是产品被真实世界认可的第一道门槛。

第一步 请先打磨一下产品。

虽然有不少的文章告诉你要快速试错。先做做一个最小可行产品。但我还是要说尽量的要把这个最小可行产品做的美观一点。流畅一点。让他看起来不像是一个试验品。而应该是一个成品。

第二步 请介绍一下你的产品。

如果你不知道如何介绍，那么请硬着头皮介绍一下。

若需跨平台（Windows/Mac/Linux）或定制化 EXE 界面（如嵌入浏览器，无需打开系统浏览器），可使用 Electron。核心思路是：Electron 启动后，同时启动 Spring Boot 后端（通过 Node.js 调用命令行）和加载 Vue 前端（Electron 内置 Chrome 内核）。
关键步骤
打包 Vue 前端：同方案 1，生成dist文件夹（publicPath设为./）。
打包 Spring Boot 后端：同方案 1，生成 Jar 包。
创建 Electron 项目：

初始化Electron项目

npm init -y

安装依赖

npm install electron shelljs --save

编写 Electron 主程序（main.js）：

const { app, BrowserWindow } = require('electron');
const shell = require('shelljs');
const path = require('path');
let backendProcess; // 后端进程

// 启动Spring Boot后端
function startBackend() {
  // 路径为Electron项目中Jar包的位置
  const jarPath = path.join(__dirname, 'backend', 'xxx-0.0.1-SNAPSHOT.jar');
  // 启动Jar包（需确保用户电脑有Java，或嵌入JRE）
  backendProcess = shell.exec(`java -jar "${jarPath}"`, { async: true });
}

// 创建Electron窗口（加载Vue前端）
function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 关闭Node集成，安全
      contextIsolation: true
    },
    icon: path.join(__dirname, 'icon.ico') // 窗口图标
  });

  // 加载Vue前端（本地静态文件）
  win.loadFile(path.join(__dirname, 'frontend', 'index.html'));

  // 窗口关闭时终止后端进程
  win.on('closed', () => {
    if (backendProcess) backendProcess.kill();
  });
}

// Electron就绪后启动
app.whenReady().then(() => {
  startBackend();
  createWindow();
});

// 所有窗口关闭时退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

整理 Electron 项目结构：

electron-project/
├─ backend/
│  └─ xxx-0.0.1-SNAPSHOT.jar  # Spring Boot Jar包
├─ frontend/
│  └─ index.html等Vue静态资源  # Vue打包后的dist文件
├─ main.js                     # Electron主程序
└─ package.json                # 项目配置

目录.png

打包 Electron 为 EXE：

安装打包工具：npm install electron-packager --save-dev
在package.json中添加脚本：

"scripts": {
"start": "electron .",
"package": "electron-packager . MyApp --platform=win32 --arch=x64 --out=out --icon=icon.ico"
}

执行打包命令：npm run package，EXE 会生成在out目录下。

常见问题

Node版本要大于》=18
更换 npm 镜像源（推荐使用国内镜像）：

设置淘宝 npm 镜像

npm config set registry https://registry.npmmirror.com/

Windows 命令行中执行（临时生效）

set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

然后重新安装

npm install electron shelljs --save

永久配置（修改 npm 配置文件）：
直接编辑项目根目录的 .npmrc 文件（如果没有就新建一个），添加：
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
如果上述方法仍失败，尝试手动下载 Electron：
从国内镜像手动下载对应版本的 Electron 包（https://npmmirror.com/mirrors/electron/），然后通过环境变量指定本地路径安装：
bash
set ELECTRON_CUSTOM_DIR=13.1.7 # 替换为你下载的版本号
set ELECTRON_MIRROR=file:///D:/path/to/your/downloaded/folder/ # 本地路径
npm install electron --save