在 Vite + Vue 3 + Electron 中使用 Express

在现代前端开发中，Vite 和 Vue 3 提供了快速的开发体验，而 Electron 则使得我们能够构建跨平台的桌面应用程序。有时，我们需要在 Electron 应用中集成一个后端服务器来处理复杂的逻辑或与数据库交互。Express 是一个轻量级且灵活的 Node.js 框架，非常适合这种需求。在这篇博客中，我们将探讨如何在 Vite + Vue 3 + Electron 项目中集成 Express。

项目结构

首先，我们需要创建一个基本的 Vite + Vue 3 + Electron 项目结构。假设你已经安装了 Node.js 和 npm，接下来我们将一步步创建项目。

1. 初始化项目

# 创建项目文件夹
mkdir vite-vue3-electron-express
cd vite-vue3-electron-express

# 初始化 npm 项目
npm init -y

# 安装 Vite 和 Vue 3
npm install vue@next
npm install vite

# 安装 Electron
npm install electron --save-dev

# 安装 Express
npm install express

2. 配置 Vite

在项目根目录下创建 vite.config.js 文件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
  },
});

3. 配置 Electron

在项目根目录下创建 main.js 文件，这是 Electron 的主进程文件：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  win.loadURL('http://localhost:3000');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

4. 配置 Express

在项目根目录下创建 server.js 文件，这是 Express 的入口文件：

const express = require('express');
const app = express();
const port = 3001;

app.get('/api/hello', (req, res) => {
  res.send('Hello from Express!');
});

app.listen(port, () => {
  console.log(`Express server listening at http://localhost:${port}`);
});

5. 配置 Vue 组件

在 src 文件夹中创建 App.vue 文件：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  async created() {
    const response = await fetch('http://localhost:3001/api/hello');
    const text = await response.text();
    this.message = text;
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 启动项目

在 package.json 中添加以下脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "electron": "electron .",
  "start": "concurrently \"npm run dev\" \"npm run electron\" \"node server.js\""
}

你需要安装 concurrently 来同时运行多个命令：

npm install concurrently --save-dev

现在，你可以运行以下命令来启动项目：

npm run start

这将启动 Vite 开发服务器、Electron 和 Express 服务器。你应该能够在 Electron 应用中看到来自 Express 服务器的消息。

总结

在这篇博客中，我们展示了如何在 Vite + Vue 3 + Electron 项目中集成 Express。通过这种方式，我们可以在桌面应用程序中使用 Express 处理复杂的后端逻辑和 API 请求。这种组合提供了强大的开发体验和灵活性，使得我们能够快速构建功能丰富的跨平台应用程序。希望这篇博客对你有所帮助，祝你开发愉快！

百万大学生都在用的AI写论文工具，篇篇无重复