electron vite vue打包

1. 安装所需依赖

electron
concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
wait-on：等待资源，此处用来等待url可访问
cross-env: 该库让开发者只需要注重环境变量的设置，而无需担心平台设置
electron-builder: electron打包库

npm install electron --save-dev
npm install concurrently wait-on --save-dev
npm install cross-env electron-builder  --save-dev

2. 配置文件

vite.config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'                                         // 新增// https://vitejs.dev/config/
export default defineConfig({base: path.resolve(__dirname, './dist/'),    // 新增plugins: [vue()]
})

新建electron文件夹

main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENVfunction createWindow() {// 隐藏菜单栏Menu.setApplicationMenu(null)// 创建浏览器窗口const mainWindow = new BrowserWindow({width: 1800,height: 900,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.html// mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意mainWindow.loadURL(NODE_ENV === 'development'? 'http://localhost:8000': `file://${path.join(__dirname, '../dist/index.html')}`);// 打开开发工具// mainWindow.webContents.openDevTools()// 打开开发工具if (NODE_ENV === "development") {mainWindow.webContents.openDevTools()}
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他// 打开的窗口，那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})

preload.js

// preload.js// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

package.json

{"name": "laneui","version": "0.0.0","main": "electron/main.js","private": true,"homepage": "/","author": {"name": "tech","email": "mail@nodejs.cn"},"build": {"appId": "com.your-website.your-app","productName": "ElectronApp","copyright": "Copyright © 2021 <your-name>","win": {"target": ["nsis"]},"linux": {"target": ["rpm"]},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"}},"scripts": {"dev": "vite --mode development --port 8000","build": "vite build --mode production","preview": "vite preview","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format": "prettier --write src/","electron": "wait-on tcp:8000 && cross-env NODE_ENV=development  electron .","electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"","electron:build": "vite build && electron-builder","electron:build:linux": "vite build && electron-builder -l --x64"},"dependencies": {"@microsoft/signalr": "^8.0.0","@vueuse/core": "^10.7.1","axios": "^1.6.5","pinia": "^2.1.7","rxjs": "^7.8.1","vue": "^3.3.11","vue-router": "^4.2.5"},"devDependencies": {"@arco-design/web-vue": "^2.54.1","@rushstack/eslint-patch": "^1.3.3","@vitejs/plugin-vue": "^4.5.2","@vue/eslint-config-prettier": "^8.0.0","concurrently": "^8.2.2","cross-env": "^7.0.3","electron": "^28.2.1","electron-builder": "^24.9.1","eslint": "^8.49.0","eslint-plugin-vue": "^9.17.0","mockjs": "^1.1.0","prettier": "^3.0.3","unplugin-auto-import": "^0.17.3","unplugin-vue-components": "^0.26.0","vite": "^5.0.10","wait-on": "^7.2.0"}
}