将web项目打包成electron桌面端教程（二）vue3+vite+ts
说明：我用的demo项目是vue3+vite+ts，如果是vue2/cli就不用往下看啦，建议找找其他教程哦~下依赖npm下载不下来的，基本换成cnpm/pnpm/yarn就可以了
一、项目准备
1、自己新创建一个，这里就不过多赘述了
2、将需要打包成的web项目先打包生成dist文件
二、electron准备
1、安装依赖
npm install --save-dev electron
2、根目录创建electron文件夹
在electron文件夹下面创建一个main.js文件（作为electron的主进程文件夹）
// 导入模块
const { app, BrowserWindow } = require('electron')
const path = require('path')
// 创建主窗口
const createWindow = () => {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 和自己本地vue项目启动的地址保持一致 mainWindow.loadURL('http://localhost:8888')
}// 应用准备就绪，加载窗口
app.whenReady().then(() => {createWindow()// mac 上默认保留一个窗口app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
在electron文件夹下面添加preload.js文件
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
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])}
})
3、修改package.json文件
- "main": "electron/main.js"
- "dev:electron":"electron ."
4、启动项目
分别启动vue和electron服务，检查有没有问题
npm run dev
npm run dev:electron
完美，试了一下可以正常登录，跳转其他页面也没什么问题~
三、打包步骤
跟着各种教程摸索了好久，几乎没找到能打包成功的，试了好几种方法，最后自己把有用的部分提取出来了，打包千万不要用官网的electron-forge✘，已经替大家踩了N多坑，用了electron-forge你就会有解决不完的报错，要么xxx包下载不下来，要么node/npm版本过低，再不济xxx文件找不到，但实际是有这个文件的，就很离谱。。。我这里打包用的是electron-builder✔
1、修改electron/main.js文件
添加以下内容：
const NODE_ENV = process.env.NODE_ENVmainWindow.loadURL(NODE_ENV === 'development'? 'http://localhost:8889':`file://${path.join(__dirname, '../dist/index.html')}`); // 打开开发工具if (NODE_ENV === "development") {mainWindow.webContents.openDevTools()} 
2、安装electron-builder
npm i electron-builder -D3、修改package.json文件
添加以下内容：
"electron:build": "electron-builder","build": {"appId": "com.demo.myApp", //包id 格式:com.xxx.项目名"productName": "myApp", // 项目名"copyright": "Copyright © 2024 <your-name>", // 版权信息"mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": true // 卸载应用清除用户缓存},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets", //静态文件资源获取目录"output": "dist_electron" // 打包位置,会新建到项目根目录}}, 
4、打包electron
npm run electron:build报错解决：
我就知道会下包失败，嘿嘿，不慌~
手动下载：
截止到2024-06-07，淘宝镜像源资源地址为：CNPM Binaries Mirror
打开后找到electron，点击进入资源列表，找到对应版本30.1.0，继续点击进入找到对应的版本，点击下载，下载成功后，放进本地资源包地址：C:\Users\Administrator\AppData\Local\electron\Cache
再次执行打包命令 ，非常不幸运，我又下包失败了
老办法手动下wix-4.0.0.5512.2.7z包，但是这次位置放的不一样
再来一次。。。成了！
双击打开，看着好像没问题，但不要高兴的太早，不信你点登录试试。。。可以登录成功，但是跳转首页是白屏
原因：web项目登录存储token，我这个demo项目用到了js-cookie库，cookie是来操作浏览器的，在electron用不了，登录成功说明接口没有问题，但是在存储和读取token的时候失败了，所以如果要打包成electron，最好一开始就不要用cookie，换成localStorage或者sessionStorage