作者最近一直在学习Electron 并使用它。遇到了一些问题，也积累了一些粗浅的经验。我在这里做个记录，准备制作一个可以打包运行在Windows、macOS和Linux上的桌面工具。

创建项目

使用vue3和vite创建vue项目然后引入Electron

先创建vue项目

npm 创建vite@最新电子桌面工具

进入项目并执行安装和运行命令。可以看到vue项目已经启动了。

cd electronics-desktop-tool npm install npm run dev

项目可以在浏览器中运行，说明没有问题。下一步是将Electron 引入项目中。

目录结构

这是当前的目录结构

安装electron

安装Electron 之前需要配置安装源

在根目录中创建一个新的.npmrc文件

strict-ssl=falseregistry=https://registry.npmmirror.com/electron_mirror=https://registry.npmmirror.com/-/binary/electron/electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud .com/electron-builder-binaries/strict-ssl=false：此设置意味着在进行SSL 连接时不强制验证证书的有效性。在某些情况下可能会使用这个来避免SSL证书验证失败registry=https://registry.npmmirror.com/：这是指定npm的镜像源，用于下载npm包Electron_mirror=https://registry.npmmirror.com/-/binary/electro/：该配置项指定Electron包的镜像源，用于下载Electron框架

安装electron相关插件

相关的二进制文件。接下来，您可以安装Electron及其相关插件。

//进入项目安装Electronnpm install -D Electron 安装Electron-Builder，用于打包可安装的exe 程序和绿色版免安装的exe 程序。

npm install -D electro-builder 安装electro-devtools-installer 用于开发和调试Electron

npm install -D electro-devtools-installer使用vite 构建电子应用程序需要vite 插件

npm install -D vite-plugin-电子

创建项目入口——主进程

Electron已成功引入，可以开始编写Electron相关代码了。新建一个src-electron 文件来编写Electron 代码，在其下创建一个main.ts 文件来编写主流程代码。

//src-electron/main.jsconst { app, BrowserWindow }=require('electron')const { join }=require('path')//屏蔽安全警告//ectron 安全警告（不安全的内容安全策略） process.env['ELECTRON_DISABLE_SECURITY_WARNINGS']='true'//创建浏览器窗口时调用此函数。 const createWindow=()={ const win=new BrowserWindow({ width: 800, height: 600, }) //win.loadURL('http://localhost:3000') //开发模式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')) }}//Electron 将被初始化并准备app.whenReady().then(()={ createWindow() app.on('activate', ()={ if (BrowserWindow.getAllWindows().length===0) createWindow() })})app .on('window-all-close', ()={ if (process.platform !=='darwin') app.quit()})

配置插件入口

在“vite.config.ts”中配置vite-plugin -电子插件入口

import {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import electro from 'vite-plugin-electron'//https://vitejs.dev/config/export 默认defineConfig({plugins: [ vue(), electro( { //主进程入口文件entry: './src- Electron/main.js' }) ], /*开发服务器选项*/server: { //端口port: 3000, }})

配置package.json

put ' in package.json输入':'模块'，删除并配置主字段

//main字段配置为Electron 主进程文件路径'main': './src- Electron/main.js',

electron 启动

运行npm run dev 启动项目

可以看到弹出了一个Electron窗口，这样一个基本的Electron应用程序就写好了。

修改标题和logo

“修改标题”

对于电子窗口左上角的标题，首先读取的是index.html的title标签值

此时评论他

如果主进程中没有配置title属性，则会读取package.json文件中的name属性。

当主进程新建BrowserWindow时，可以自定义窗口标题

const win=new BrowserWindow({ width: 800, height: 600, title:' 导演在外面'})

“修改图标”

窗口图标和任务栏图标默认为Electron 徽标

窗口图标是在new BrowserWindow 初始化窗口实例时配置的，并且与标题一起。

const { join }=require('path')const win=new BrowserWindow({ width: 800, height: 600, title:'董员外', icon: join(__dirname, './public/logo.ico'),})join就是引入的path方法__dirname是当前文件的路径。我们的main.js在src-electron文件夹下，所以要找到图片，需要返回到之前的目录./public/logo.ico

打包

我们已经安装了打包插件以及第一步使用的包，但是我们还需要配置一些打包参数。

配置package.json

首先配置打包命令，在‘scripts’中配置这个打包命令

' Electron:build': 'vite build electro-builder'增加了build属性对象，主要配置打包信息

'build': { 'productName': 'ElectronDeskTopTool', 'appId': 'dyy.dongyuanwai', '版权': 'dyy.dongyuanwai 2024', '压缩': '最大', 'asar': true, ' directories': { 'output': 'release/' //输出目录}, 'nsis': { 'oneClick': false, //是否一键安装'allowToChangeInstallationDirectory' : true, //允许修改安装directory 'perMachine' : true, 'deleteAppDataOnUninstall': true, 'createDesktopShortcut': true,//创建桌面图标'createStartMenuShortcut': true,//创建开始菜单图标'shortcutName': 'ElectronDeskTopTool' }, 'win': { 'icon': './public/logo.ico',//安装图标'artifactName': '${productName}-v${version}-${platform}-setup.${ext}',//安装包名'target ': [ { 'target': 'nsis' } ] }, 'mac': { 'icon': './public/logo.ico', 'artifactName': '${productName}-v$ {version}- ${platform}-setup.${ext}' }, 'linux': { 'icon': './public/logo.ico', 'artifactName': '${productName}-v${ version}-$ {platform}-setup.${ext}' } }，配置主线程打包加载文件

使用process.env.VITE_DEV_SERVER_URL判断是否为开发模式

打包后，会加载index.html文件。

这是完整的package.json文件内容

{ '名称': '电子桌面工具'， '私人': true， '版本': '0.0.0'， '主': './src- Electron/main.js'， '脚本': { 'dev': 'vite', 'build': 'vue-tsc vite build', '预览': 'vite 预览', 'electron:build': 'vite 构建电子构建器' }, 'build': { 'productName'第：章'ElectronDeskTopTool', 'appId': 'dyy.dongyuanwai', '版权': 'dyy.dongyuanwai 2024', '压缩': '最大', 'asar': true, '目录': { '输出': 'release/' }, 'nsis': { 'oneClick': false, 'allowToChangeInstallationDirectory': true, 'perMachine': true, 'deleteAppDataOnUninstall': true, 'createDesktopShortcut': true, 'createStartMenuShortcut': true, 'shortcutName'第：章'ElectronDeskTopTool' }, 'win': { 'icon': './public/logo.ico', 'artifactName': '${productName}-v${version}-${platform}-setup.${ ext}', 'target': [ { 'target': 'nsis' } ] }, 'mac': { 'icon': './public/logo.ico', 'artifactName': '${productName}- v${version}-${platform}-setup.${ext}' }, 'linux': { 'icon': './public/logo.ico', 'artifactName': '${productName}-v ${version}-${platform}-setup.${ext}' } }, 'dependencies': { 'vue': '^3.4.21' }, 'devDependency': { '@vitejs/plugin-vue'第：章“^5.0.4”，“电子”:“^30.0.0”，“电子建造者”:“^24.13.3”，“电子开发工具安装程序”:“^3.2.0”，“打字稿” : '^5.2.2', 'vite': '^5.2.0', 'vite-plugin-电子': '^0.28.4', 'vue-tsc': '^2.0.6' }} 010- 1010 npm run electro:build 可以看到打包成功，生成了指定的打包文件输出目录。

release目录下有安装包

您可以通过设置allowToChangeInstallationDirectory来自定义安装目录。

设置createDesktopShortcut后，可以看到安装成功后桌面上生成了快捷方式。

这被认为是成功的。接下来我们简单看一下构建打包配置。您可以详细了解打包结果的设置。

win打包

//打包好的配置放在build中'build': { 'productName':'ElectronDeskTopTool', //项目名称这也是生成的exe文件的前缀名称，也可以在各个环境中配置' appId ': 'com.dyy.dongyuanwai', //应用的唯一标识，通常是反向域名格式'copyright': 'dyy.dongyuanwai 2024', //版权信息，在应用描述中显示版权在哪里属于'compression': 'maximum', //压缩级别，指定打包时使用的压缩级别。这里设置为'maximum'表示最大压缩'asar': true, //是否启用asar打包。 asar是Electron提供的一种文件打包方式，可以提高应用程序的性能和安全性。 'directories': { //指定输出目录，打包后的文件会放在该目录下。 'output': 'release' }, //Windows相关配置'win': { 'icon': 'xxx/icon.ico', //图标路径'artifactName': '${productName}-v${version }-${platform}-setup.${ext}' //安装包名称}, //这个意思是打出32位+64位的包，但是请注意：这样打包的安装包比较大。因此，建议直接下载32位安装包。 'arch': [ 'x64', 'ia32' ] }

build相关配置

NSIS（Nullsoft 脚本安装系统）被打包以生成Windows 平台的安装程序。

'nsis': { 'oneClick': false, //是否一键安装'perMachine': true, //设置为true时，应用程序将安装在计算机上的所有用户帐户中； false 只会安装在当前用户帐户中'allowElevation': true, //允许使用提升权限进行安装。设置为true 时，安装过程可能会请求管理员权限'allowToChangeInstallationDirectory': true, //允许修改安装目录'installerIcon': 'xxx/xxxx. ico', //安装图标'uninstallerIcon' : 'xxx/xxxx.ico', //卸载图标'installerHeaderIcon' : 'xxx/xxxx.ico', //安装时的头部图标'deleteAppDataOnUninstall' : true, //当设置为true，卸载应用程序时会删除应用程序的数据文件'createDesktopShortcut': true, //创建桌面图标'createStartMenuShortcut': true, //创建开始菜单图标'shortcutName': 'xxxx', //图标名称}，

nsis配置

electro-builder打包会自动识别环境，所以我也可以直接在Linux环境下运行npm run electro:build，就会打包为Linux包

linux环境会被格式化为.deb格式，所以必须在package.json中配置linux中

'linux': { 'icon': './public/logo.ico', 'artifactName': '${productName}-v${version}-${platform}-setup.${ext}', '目标': [ 'deb' ] }

linux 打包

当你运行打包命令时，你会发现这个错误：

请指定项目主页，参见https://Electron.build/configuration/configuration#Metadata-homepa

请在应用程序package.json 中指定作者“电子邮件”

这是因为package.json文件中的homepage、auth和email字段没有配置。

解决linux打包报错

虽然是Electron客户端中的路由，但是配置还是和vue的一样。

《1.安装路由：》

npm install vue-router@4 添加路由页面：在src 目录下新建page 文件夹，用于存放页面。

“2.新建第一页和第二页”

/page/first/index.vuetemplate h1 这是第一页/h1 按钮@click='go' 转到第二页/button/templatescript setup lang='ts'import { useRouter } from 'vue-router';const router=useRouter ()const go=()={ router.push('/second');};/scriptstylescoped/style/page/second/index.vuetemplate h1 这是第二个page/h1按钮@click=' go'转到第一个页面/按钮/模板脚本设置lang='ts'import { useRouter } from 'vue-router';const router=useRouter()const go=()={ router.push('/');} ;/scriptstyle范围/样式「3.配置路由表」

在src下新建router目录，然后在其中添加index.ts文件并在其中配置路由。

//src\router\index.tsimport { createRouter, createWebHashHistory } from 'vue-router'const router=createRouter({ //hash 模式。history: createWebHashHistory(), paths: [ //设置首页{ path: '/', component: ( )=import('./page/first/index.vue') }, { path: '/second', component: ()=import('./page/second/index.vue') }, ], } )export默认router文件目录结构如下：

《4.在src下的main.ts中使用路由》

import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app' ) "5.删除App.vue文件中原有内容并添加router-view"

脚本设置lang='ts'/scripttemplate router-view/router-view/templatestylescoped/style 开始运行

看看最后的效果