将web项目打包成electron桌面端教程vue3+vite+js

在这个教程中，我们将使用Vue 3、Vite和JavaScript来创建一个可以打包成Electron桌面应用程序的Web项目。

1. 创建一个Vue 3项目：

npm create vue@latest
# 然后按照提示进行操作，选择Vue 3和使用Vite

2. 安装Electron依赖：

npm install electron --save-dev

3. 在项目根目录下创建一个electron-builder.yml配置文件，用于Electron的构建配置：

# electron-builder.yml
directories:
  output: build
  buildResources: buildResources
files:
  extra:
    - README.md
    - LICENSE
    - .electron-vue/electron.js
    - build/icons/*
asar: true

4. 在package.json中添加Electron的脚本：

{
  "scripts": {
    "electron:build": "vue-tsc --noEmit && vite build",
    "electron:dev": "vue-tsc --noEmit && electron .",
    "electron:pack": "vue-tsc --noEmit && vite build && electron-builder --dir",
    "electron:dist": "vue-tsc --noEmit && vite build && electron-builder"
  }
}

5. 创建Electron的主进程文件.electron-vue/electron.js：

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'),
      nodeIntegration: true
    }
  })
 
  win.loadURL('http://localhost:3000')
  // 如果你想要加载打包后的web应用，可以使用：
  // win.loadFile('dist/index.html')
}
 
app.whenReady().then(createWindow)

6. 创建预加载脚本.electron-vue/preload.js（可选，根据需要使用）：

// 你可以在这里做一些Electron的预加载工作，例如：
// const { contextBridge, ipcRenderer } = require('electron')

7. 最后，运行以下命令来启动Electron应用：

npm run electron:dev

这个教程提供了一个基本框架来将Web项目打包成Electron桌面应用程序。根据你的具体需求，你可能需要进一步配置Electron的主进程和预加载脚本。