Electron桌面应用打包现有的vue项目

1 环境准备

Node：v16.20.2（本地vue项目nodejs版本）
Electron：22.3.7
vue：2

版本管理

2 Vue项目准备

更新相关依赖
npm install --registry https://registry.npmmirror.com/
npm run dev

3、引入Electorn

安装指定版本Electron：npm install electron --save-dev
查看Electron版本：npx electron --version

注意：切换成国内源以及设置

切换国内源：npm config set registry https://registry.npmmirror.com
配置环境变量
- ELECTRON_MIRROR:https://npmmirror.com/mirrors/electron/
- ELECTRON_CUSTOM_DIR:{{ version }}

4、修改项目

4.1 根目录创建`main.js`

scss 复制代码

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    win.loadFile(path.join(__dirname, 'dist/index.html')); // 修改为你的打包输出路径
    // 打开开发者工具
    win.webContents.openDevTools();
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

4.2 修改 `package.json`

在 package.json 中添加 Electron 启动脚本：

json 复制代码

"main": "main.js",
"scripts": {
    "electron": "electron .",
    "build": "vue-cli-service build" // 确保有这个构建命令
}

4.3 构建项目

arduino 复制代码

npm run build

这将生成 dist 文件夹，包含生产环境的静态文件。

4.4 启动 Electron

npm run electron

5、使用内置web渲染vue

Electron 中启动一个内置的 Node.js Web 服务器来渲染用 Vue.js 编写的页面，可以使用 express 或其他类似的 Node.js Web 框架。以下是一个基本的实现步骤：

5.1 安装依赖

首先，确保您已安装 express 和 vue 相关的依赖。可以通过 npm 安装：

npm install express

5.2 设置 Express 服务器

在您的项目中创建一个新的文件，例如 server.js，并配置一个简单的 Express 服务器：

javascript 复制代码

// server.js
const express = require('express');
const path = require('path');

const app = express();
const PORT = 3000;

// Serve static files from the Vue app
app.use(express.static(path.join(__dirname, 'dist')));

// Handle all requests to serve the index.html file
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`Server is running at http://localhost:${PORT}`);
});

5.3 修改 `main.js`

在主进程中，启动该服务器，并在 BrowserWindow 中加载它：

javascript 复制代码

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const { exec } = require('child_process');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    });

    // Load the local server
    win.loadURL('http://localhost:3000');
}

app.whenReady().then(() => {
    // Start the server
    exec('node server.js', (err, stdout, stderr) => {
        if (err) {
            console.error(`Error starting server: ${stderr}`);
            return;
        }
        console.log(stdout);
    });

    createWindow();
});

// Quit when all windows are closed
app.on('window-all-closed', () => {
    app.quit();
});

5.4 确保构建 Vue 应用

确保在启动 Electron 应用之前，您已经构建了 Vue 应用（例如运行 npm run build），以便生成 dist 文件夹。

5.5 启动项目

最后，启动 your Electron 应用：

sql 复制代码

npm start

6、打包项目

如果您想打包成可执行文件，可以使用 Electron Builder 或 Electron Packager。安装 Electron Builder：

css 复制代码

npm install electron-builder --save-dev

然后在 package.json 中添加打包配置：