web->electron,简单记录一下搭建项目时遇到的一些问题和搭建步骤
创建项目
pnpm create vite@latest vue-electron-test
安装electron以及相关插件
ts
//安装electron
pnpm install electron -D
//安装打包和exe程序
pnpm install electron-builder -D
//安装electron调试插件
pnpm install electron-devtools-installer -D
//安装使用vite构建electron应用程序插件
pnpm install vite-plugin-electron
//electron-builder:备注安装最新版本的依赖可能会导致版本不兼容引起报错
package.json
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.21",
"electron": "^37.3.1",
"electron-builder": "^24.13.3",
"electron-devtools-installer": "^3.2.0",
"postcss": "^8.5.6",
"tailwindcss": "3.4.17",
"typescript": "~5.8.3",
"vite": "^7.1.2",
"vite-plugin-electron": "^0.28.4",
"vue-tsc": "^3.0.5"
}
创建项目入口---main.js(主进程文件)
在项目根目录下创建一个electron文件夹用于存放electron相关的文件(main.js/preload.js)
可以在主进程文件BrowserWindow函数中配置窗口大小width/height,logo , title
更多配置参考官方文档: www.electronjs.org/zh/docs/lat...
js
//main.js
const { app, BrowserWindow } = require('electron')
const { join } = require('path')
// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
// 创建浏览器窗口时,调用这个函数。
const createWindow = () => {
const win = new BrowserWindow({
width: 1280,
height: 800,
minWidth : 300,
minHeight : 180,
icon: join(__dirname, '../public/logo.ico'),
frame: true, //是否展示顶部菜单
webPreferences: {
preload: join(__dirname, 'preload.js')
}
})
// 隐藏顶部菜单
win.setMenu(null);
// win.loadURL('http://localhost:3000')
// development模式
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
// 开启调试台
// win.webContents.openDevTools()
} else {
win.loadFile(join(__dirname, '../dist/index.html'))
// win.webContents.openDevTools()
}
}
// Electron 会在初始化后并准备
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
创建preload.js(通信文件 进程-->preload.js-->主进程)
``Preload.js 文件是一个**特殊的、运行在渲染进程上下文中的 JavaScript 脚本**,它的核心作用是**在渲染进程和主进程之间建立一个安全、可控的通信桥梁**,同时**隔离渲染进程对 Node.js 和 Electron API 的直接访问**,以增强应用的安全性。
js
//preload.js
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])
}
})
配置vite插件
ts
//vite.config.ts
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
import electron from "vite-plugin-electron";
// https://vite.dev/config/
export default defineConfig({
base: "./",
plugins: [
vue(),
electron({
// 主进程入口文件
entry: "./electron/main.js",
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"~": fileURLToPath(new URL("./", import.meta.url)),
},
},
server: {
// 端口
port: 3000,
},
});
配置package.json文件
删除
"type": "module" ,因为
Node.js 和 Electron 的主进程使用传统的 CommonJS 模块,而不是现代的 ES Modules (ESM) 系统。 如果不删除,Electron 的主进程会因为无法理解
require()` 语法而直接崩溃。这里当然也可以使用es module格式,不过mian.js及electron中使用的一些文件需要手动修改为import格式导入
配置主进程文件路径
:"main": "./electron/main.js"
配置打包以及修改icon
json
//package.json
{
"name": "web-electron-test",
"private": true,
"version": "0.1.0",
"main": "./electron/main.js",
"scripts": {
"dev": "vite",
"build": "vue-tsc -b && vite build",
"electron:build": "vite build && electron-builder",
"preview": "vite preview"
},
"build": {
"productName": "BaMaster",
"appId": "aps.bamaster",
"copyright": "aps.bamaster © 2025",
"compression": "maximum",
"asar": true,
"directories": {
"output": "release/"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"perMachine": true,
"deleteAppDataOnUninstall": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "BaMaster"
},
"win": {
"icon": "./public/logo.ico",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
"target": [
{
"target": "nsis"
}
]
},
"mac": {
"icon": "./public/vite.svg",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
},
"linux": {
"icon": "./public/vite.svg",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
}
},
"dependencies": {
"scss": "^0.2.4",
"vue": "^3.5.18",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.21",
"electron": "^37.3.1",
"electron-builder": "^24.13.3",
"electron-devtools-installer": "^3.2.0",
"postcss": "^8.5.6",
"tailwindcss": "3.4.17",
"typescript": "~5.8.3",
"vite": "^7.1.2",
"vite-plugin-electron": "^0.28.4",
"vue-tsc": "^3.0.5"
}
}
配置第三方依赖TainWindcss或其他的一些依赖包,和平常写vue一样
npm install -D tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init -p
使用该命令会生成两个文件,若未生成可在根目录下自行创建
js
//postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
创建tailwind.css文件并引入main.ts(vue)文件
css
@tailwind base;
@tailwind components;
@tailwind utilities;
运行项目
pnpm dev

打包项目
electron:build
由于package.json文件中已配置好,在执行命令完之后会在根目录下生成一个名为release文件夹,里面会生成一些各版本的安装包

总结一下搭建项目中遇到的报错
- 更新electron-builder版本,再次运行打包命令时会报错

意思是让删除resources\app.asar这个文件,这时你会发现该文件被占用删不掉,简单粗暴关机重启重新运行打包命令再次打包就没问题了
- 打包时可能会遇到以下错误

这时你只需要访问url后面的链接,下载版本对应的winCodeSign-2.6.0压缩包文件,手动放在C:\Users\DELL\AppData\Local\electron-builder\Cache\winCodeSign文件下就可以了
- icon换了不生效问题并且报错
- 检查在electron/main.js中是否配置icon
js
const createWindow = () => {
const win = new BrowserWindow({
width: 1280,
height: 800,
icon: join(__dirname, '../public/logo.ico'),
frame: true, //是否展示顶部菜单
webPreferences: {
preload: join(__dirname, 'preload.js')
}
})
// win.loadURL('http://localhost:3000')
// development模式
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
// 开启调试台
win.webContents.openDevTools()
} else {
win.loadFile(join(__dirname, '../dist/index.html'))
}
}
- 若还报错看控制台报错信息,让提供一张250*250像素的ico 格式的图片,换了之后就成功啦
-
安装路由时无报错,运行项目发现时空白页面
将createMemoryHistory模式修改为createWebHashHistory模式就Ok啦
目前就发现这么多坑,先探探路,后续正式写项目时,再更新吧