Web项目转换为Electron桌面应用程序

以Svelte + Vite +VS Code框架开发的Web项目为例：

1、安装必要的工具： 确保你已经在系统中安装了Node.js和npm（Node.js包管理器）。你可以从官方网站下载并安装Node.js：Node.js官网。

2、打开VS Code： 打开VS Code编辑器。

3、创建新的Electron项目文件夹： 在VS Code中选择一个合适的文件夹，并在其中创建一个新的文件夹来存放你的Electron项目。

4、初始化项目： 打开VS Code的终端（Terminal），并在选定的文件夹中执行以下命令来初始化一个新的Node.js项目：

npm init -y

这将创建一个默认的package.json文件。

5安装Electron依赖： 在终端中执行以下命令来安装Electron依赖：

bash

npm install electron

这将在你的项目中安装Electron并将其添加到package.json文件的依赖列表中。

6、通过Vite打包WEB项目： 将打包后的文件拷贝到Electron项目文件夹的dist下。

7、创建Electron入口文件： 在项目文件夹中创建一个Electron的入口文件，例如main.js。这将是Electron应用程序的主要入口点。

8、在main.js中编写代码： 在main.js文件中编写Electron应用程序的启动代码。例如：

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

const path = require('path');

function createWindow() {

  const mainWindow = new BrowserWindow({

    width: 800,

    height: 600,

    webPreferences: {

      nodeIntegration: true

    }

  });

//index.html 根据自己项目替换

mainWindow.loadFile(path.join(__dirname, 'dist', 'index.html'));

}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') {

    app.quit();

  }

});

app.on('activate', () => {

  if (BrowserWindow.getAllWindows().length === 0) {

    createWindow();

  }

});

8、修改Electron的package.json： 在Electron项目中创建一个package.json文件，并确保指定了正确的入口文件和其他相关信息。例如：

{

  "name": "com-web-electron",

  "version": "1.0.0",

  "description": "",

  "main": "main.js",

  "scripts": {

    "start": "electron .",

    "build": "electron-builder"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "electron": "^29.1.1",

    "electron-builder": "^24.13.3",

    "electron-packager": "^17.1.2"

  }

}

9、新建electron-builder.json： 在Electron项目中创建一个electron-builder.json文件。例如：

{

  "appId": "com.my.app",

  "productName": "myapp",

  "directories": {

    "output": "build"

  },

  "files": [

    "dist/**/*",

    "main.js"

  ],

  "extends": null,

  "mac": {

    "target": "dmg"

  },

  "win": {

    "target": "nsis"

  }

}

10、运行项目： 在终端中执行以下命令来启动Electron应用程序：

electron .

11、构建项目： 在终端中执行以下命令来启动Electron应用程序：

npm run build

这将启动Electron应用程序，并在Electron窗口中显示你在index.html中编写的内容。