前言
- 最近利用react+vite+ts创建了一个前端项目,希望能够打包成exe进行分发,浏览了几个csdn教程,参照进行打包的过程并不是很顺利,这里分享自己的解决方法。
- 项目创建过程:直接使用npm创建,语言选择了typescript
npm create vite@latest
简明版教程以及优点
- 利用electron的开源项目,把自己的dist文件夹放入其中
- 修改main.js
- 优点:成功率高,适配typescript语言,不用修改自己原始项目中的任何东西,不用担心因为打包导致原有代码跑不了
打包过程
当完成项目后,保留目录中的所有配置不变,包括package.json, tsconfig.json等,就使用生成项目时候默认的配置,直接在命令行运行:
npm run build
参照package.json中的配置,build命令实际执行的是tsc编译(将ts转换为js)以及vite build:
// package.json
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
执行完成后出现dist文件夹,内容展示如下:
然后,重点来了!不要自己在根目录底下添加main.ts或者main.js,这样很容易因为ts和js一些配置冲突导致打包不成功,我尝试的方法是:
- 去github上克隆electron的开源项目,这是一个小型的electron app
- 按照仓库readme的内容先下载node_modules
- 将以上生成的dist文件夹放入根目录中
- 将根目录中原有的main.js中的下述语句进行替换:
// 原始代码 mainWindow.loadFile('index.html') // 替换为 mainWindow.loadFile('./dist/index.html')
- 先运行
npm run start
看看是否正常出现electron窗口,是的话说明路径等已经调整正确
- 安装electron-forge,这里直接参考官方文档中给出的命令:
npm install --save-dev @electron-forge/cli npx electron-forge import
- 以上命令会自动修改package.json文件并添加相关的依赖
- 最后运行
npm run make
打包后的应用程序存储在out/make文件夹中,同时包含有配套的配置文件,至此,打包完成!
最后将自己的项目做一个小小的分享,这是一个对图算法进行可视化的项目,同时含有对于上海市地铁线路图的可视化,支持路径查询,项目github仓库地址,欢迎在原有项目基础上进行合适的修改!