vue3+vite+electron项目搭建

一、vite创建新项目二、安装项目依赖三、修改package.json文件添加build节点修改scripts节点添加main节点package.json总体代码展示 四、修改vite.config.js五、在项目根文件夹创建一个新的文件夹electron，并在其中创建文件electron.js完成

一、vite创建新项目

pnpm create vite

二、安装项目依赖

pnpm add -D concurrently cross-env electron electron-builder electron-packager wait-on

三、修改package.json文件

添加build节点

"build": {"appId": "com.my-website.my-app","productName": "MyApp","copyright": "Copyright © ${author}","mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"},"electronDownload": {"mirror": "/mirrors/electron/"}},

修改scripts节点

"scripts": {"dev": "vite","build": "vite build","serve": "vite preview","start": "electron .","packager": "electron-packager ./dist/ --platform=win32 --arch=x64 --overwrite","electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .","electron:dev": "concurrently -k \"cross-env BROWSER=none npm run dev\" \"npm run electron\"","electron:build.win": "npm run build && electron-builder --win --dir","electron:build.linux": "npm run build && electron-builder --linux appImage","electron:build.test": "npm run build && electron-builder --dir","electron:build.exe": "npm run build && electron-builder --win"},

添加main节点

{"main": "electron/electron.js",}

package.json总体代码展示

{"name": "integrated-pc","author": "wh","private": true,"version": "1.0.0","scripts": {"dev": "vite","build": "vite build","serve": "vite preview","start": "electron .","packager": "electron-packager ./dist/ --platform=win32 --arch=x64 --overwrite","electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .","electron:dev": "concurrently -k \"cross-env BROWSER=none npm run dev\" \"npm run electron\"","electron:build.win": "npm run build && electron-builder --win --dir","electron:build.linux": "npm run build && electron-builder --linux appImage","electron:build.test": "npm run build && electron-builder --dir","electron:build.exe": "npm run build && electron-builder --win"},"build": {"appId": "com.my-website.my-app","productName": "MyApp","copyright": "Copyright © ${author}","mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"},"electronDownload": {"mirror": "/mirrors/electron/"}},"main": "electron/electron.js","dependencies": {"ant-design-vue": "^2.2.8","axios": "^0.26.0","js-cookie": "^3.0.1","path": "^0.12.7","vue": "^3.2.25","vue-router": "^4.0.12"},"devDependencies": {"@types/node": "^17.0.21","@vitejs/plugin-vue": "^2.2.0","concurrently": "^7.0.0","cross-env": "^7.0.3","electron": "^17.1.0","electron-builder": "^22.14.13","electron-packager": "^15.4.0","sass": "^1.49.8","typescript": "^4.5.4","vite": "^2.8.0","vue-tsc": "^0.29.8","wait-on": "^6.0.1"}}

四、修改vite.config.js

import {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({base: process.env.ELECTRON=="true" ? './' : "",plugins: [vue()]})

五、在项目根文件夹创建一个新的文件夹electron，并在其中创建文件electron.js

// electron/electron.jsconst path = require('path');const {app, BrowserWindow } = require('electron');const isDev = process.env.IS_DEV == "true" ? true : false;function createWindow() {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {//preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,},});// and load the index.html of the app.// win.loadFile("index.html");mainWindow.loadURL(isDev? 'http://localhost:3000': `file://${path.join(__dirname, '../dist/index.html')}`);// Open the DevTools.if (isDev) {mainWindow.webContents.openDevTools();}}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.whenReady().then(() => {createWindow()app.on('activate', function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()})});// Quit when all windows are closed, except on macOS. There, it's common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}});

完成

pnpm run dev //浏览器开发pnpm run build //electron打包pnpm run start //electron开发pnpm run electron:build.exe //win打包