vite vue3 electron整合

最新推荐文章于 2025-10-15 13:08:18 发布

原创最新推荐文章于 2025-10-15 13:08:18 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #vue.js #前端

笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何将Vite与Vue3框架结合，并与Electron进行深度整合，包括设置所需依赖包、package.json中脚本和Electron打包配置、主进程main.js的配置，以及解决打包后可能出现的首页白页问题的vite.config.js配置。

1.所需包

"dependencies": {
  "vue": "^3.2.8"
},
"devDependencies": {
  "concurrently": "^7.3.0", //命令拼接
  "cross-env": "^7.0.3",  //node环境切换
  "electron": "^20.0.3",
  "electron-builder": "^23.3.3",  //electron打包工具
  "rimraf": "^3.0.2",  // 快速删除目录
  "wait-on": "^6.0.1",   // 进程等待
  "@vitejs/plugin-vue": "^1.6.0",
  "@vue/compiler-sfc": "^3.2.6",
  "vite": "^2.5.2"
  }

2.package.json script及electron打包配置

"main": "electron/main.js",
  "scripts": {
		"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
		"electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
		"electron:build": "rimraf dist && npm run build && electron-builder",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
	"build": {
			"productName": "LookLock",
			"copyright": "Copyright © 2022 yeyunlong",
			"mac": {
				"category": "public.app-category.utilities"
			},
			"nsis": {
				"oneClick": false,
				"allowToChangeInstallationDirectory": true
			},
			"win": {
				"icon": "./favicon.ico"
			},
			"files": [
				"dist/**/*",
				"electron/**/*"
			],
			"directories": {
				"buildResources": "assets",
				"output": "dist"
			}
		},

3.electron主进程配置main.js

const {
  app,
  screen,
  BrowserWindow
} = require('electron')
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;
let win;

function createWindow() {
  win = new BrowserWindow({
    // Electron获取屏幕工作窗口尺寸
    width: screen.getPrimaryDisplay().workAreaSize.width,
    height: screen.getPrimaryDisplay().workAreaSize.height,
    icon: path.resolve(__dirname, "favicon.ico"),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  // app是否是打包状态
  // app.isPackaged return(Boolean) 
  win.loadURL(
    NODE_ENV === "development" ?
    "http://localhost:3000" :
    `file://${path.join(__dirname, "../dist/index.html")}`
  );
  if (NODE_ENV === "development") {
    win.webContents.openDevTools();
  }
  
}

app.whenReady().then(() => {
  createWindow()
  
  // 允许跨域
  // win.webContents.session.webRequest.onBeforeSendHeaders(
  // 	(details, callback) => {
  // 		callback({
  // 			requestHeaders: {
  // 				Origin: "*",
  // 				...details.requestHeaders
  // 			},
  // 		});
  // 	}
  // );
  // win.webContents.session.webRequest.onHeadersReceived(
  // 	(details, callback) => {
  // 		callback({
  // 			responseHeaders: {
  // 				"Access-Control-Allow-Origin": ["*"],
  // 				...details.responseHeaders,
  // 			},
  // 		});
  // 	}
  // );
  
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
      
    }
  })
})

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

4.preload.js预加载程序（略）

5.vite.config.js base路径配置（解决打包后首页展示白页）

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
	base: "./",
})