electron：vue3+vite打包案例

1、安装electron

首先设置镜像源，否则安装会非常非常慢。

打开npm的配置文件。

npm config edit

修改配置项。

registry=https://registry.npmmirror.com

electron_mirror=https://cdn.npmmirror.com/binaries/electron/

electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

镜像源设置好后，就可以npm install electron了。

2、安装concurrently

concurrently是本地运行electron需要用到的插件，npm install concurrently即可。

3、electron的main.js和preload.js文件

在项目根目录下，创建electron文件夹，在该文件夹下创建main.js和preload.js。

main.js代码如下：

const {
	app,
	BrowserWindow
} = require('electron')
const path = require('node:path')

const createWindow = () => {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(__dirname, 'preload.js')
		}
	})
	// 连接本机前端页面的端口号
	win.loadURL("http://localhost:3000")
	win.webContents.openDevTools()
}

app.whenReady().then(() => {
	createWindow()
})

// 关闭所有窗口时，退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

preload.js代码如下：

由于本案例只是一个demo，功能简单，preload里并无功能性代码，只是为了保证代码项目结构完整性，对应了main.js里的preload: path.join(__dirname, 'preload.js')

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
  // 除函数之外，我们也可以暴露变量
})

在package.json里设置main的路径，也就是我们在根目录下创建的electron文件下的main.js。script里添加启动命令命令。

"main": "electron/main.js",
"scripts": {
		"dev": "concurrently \"vite\" \"electron .\""
	}

运行npm run dev，concurrently 会同时启动vite和electron，只启动electron的话，页面会是一片空白。

本地运行结果如下，打开了调试工具：

4、安装electron-builder

electron-builder是用来将项目打包成exe文件的。

之前已经设置了镜像源，此时只需要npm install electron-builder即可。

打包一共需要两个步骤，先用vite打包成dist，然后用electron-builder打包成exe。

所以在package.json的script里，我们将这两个步骤合并一下：

"scripts": {
		"dev": "concurrently \"vite\" \"electron .\"",
		"build": "vite build && electron-builder"
	},

还需要进行其他打包设置，比如设置icon路径，icon也放在根目录下的electron文件夹里，target设置为nsis，会生成安装程序的exe；files是打包后需要包含的文件，dist是vite build生成的文件夹，electron文件夹下有main.js和preload.js，package.json里包含了重要的配置信息，所以把它们都放在打包里；directories的output是electron-builder打包后的文件夹名称，设置为release，跟dist文件夹同级。

"build": {
		"appId": "electron_multiple_languages",
		"win": {
			"icon": "electron/icon.ico",
			"target": "nsis"
		},
		"files": [
			"dist/**/*",
			"electron/**/*",
			"package.json"
		],
		"directories": {
			"output": "release"
		}
	},

打包后不需要显示调试工具了，main.js里需要判断生产环境还是开发环境：

如果是生产环境，需要从dist文件夹的index.html入口，如果是开发环境，连接本地，打开调试工具。

注意端口号不一定是3000，根据你项目实际的端口号来写。

if(app.isPackaged){
		win.loadFile(path.join(__dirname, '../dist/index.html'))
	}else{
		// 连接本机前端页面的端口号
		win.loadURL("http://localhost:3000")
		win.webContents.openDevTools()
	}

执行npm run build命令。

首次使用electron-builder打包时，会到github上去下载winCodeSign和nsis的二进制文件，由于网络问题经常失败。

可以直接去镜像源地址里下载它们：

winCodeSign-2.6.0

nsis需要下载两个包：

CNPM Binaries Mirror

下载好，解压，放在cache目录下：

打包过程中还会遇到其他问题，比如：

icon的分辨率不合规，必须是256*256；

package.json里缺少author和description；

electron和electron-builder必须在devDependencies里。

具体问题按照错误提示来修改即可。

打包后的目录结构：

5、删除dist和release

每次生成的dist文件夹里文件名不相同，如果想要反复打包，dist里的文件是无法自动覆盖的，最好每次都删除dist和release文件夹，需要借助插件rimraf。

npm install rimraf安装，增加删除命令：

"scripts": {
		"clean": "rimraf dist release",
		"dev": "concurrently \"vite\" \"electron .\"",
		"build": "npm run clean && vite build && electron-builder"
	},

7、白屏问题

双击release文件夹下的setup.exe文件，安装程序，会在桌面创建快捷方式，双击启动程序，但是会发现一片空白。

这个问题卡了好几个小时，一遍一遍问deepseek，终于找到了问题所在，打包后文件加载要用相对路径，需要在vite.config.js里设置base:'./'

注意，在vite.config.js里是设置base，如果是vue.config.js，是设置publicPath，根据自己项目实际情况来写。

最终运行结果：

完整代码：

electron文件夹下的main.js

const {
	app,
	BrowserWindow
} = require('electron')
const path = require('node:path')

const createWindow = () => {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(__dirname, 'preload.js')
		}
	})
	if(app.isPackaged){
		win.loadFile(path.join(__dirname, '../dist/index.html'))
	}else{
		// 连接本机前端页面的端口号
		win.loadURL("http://localhost:3000")
		win.webContents.openDevTools()
	}
}

app.whenReady().then(() => {
	createWindow()
})

// 关闭所有窗口时，退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

electron文件夹下的preload.js

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
  // 除函数之外，我们也可以暴露变量
})

package.json

{
	"name": "electron_multiple_languages",
	"version": "0.0.0",
	"author": "demo@163.com",
	"main": "electron/main.js",
	"scripts": {
		"clean": "rimraf dist release",
		"dev": "concurrently \"vite\" \"electron .\"",
		"build": "npm run clean && vite build && electron-builder"
	},
	"build": {
		"appId": "electron_multiple_languages",
		"win": {
			"icon": "electron/icon.ico",
			"target": "nsis"
		},
		"files": [
			"dist/**/*",
			"electron/**/*",
			"package.json"
		],
		"directories": {
			"output": "release"
		}
	},
	"dependencies": {
		"concurrently": "^9.2.0",
		"rimraf": "^6.0.1",
		"vue": "^3.2.8"
	},
	"devDependencies": {
		"@vitejs/plugin-vue": "^1.6.0",
		"@vue/compiler-sfc": "^3.2.6",
		"electron": "^37.2.5",
		"electron-builder": "^26.0.12",
		"vite": "^2.5.2"
	}
}

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()],
	base: './', // 确保资源使用相对路径
})