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: './', // 确保资源使用相对路径
})