electron打包部署vue项目

背景:面试时提供一个开源代码包,把vue3编译后打包成electron的exe可执行文件

开源代码包:https://gitee.com/bluexsx/box-im

运行效果:

开始实战:

进入im-web模块,cmd命令,npm install,npm run build

但是这里有个坑,就是npm run serve 启动有界面效果,electron打包后启动是空白界面。

原因是路径问题:添加 publicPath: "./",

在vue.config.js里面配置

重新打包

npm run build

下一步,克隆这个electron-quick-start ,借助他帮助我们转成electron.exe

git clone https://github.com/electron/electron-quick-start

安装依赖,启动项目

cd electron-quick-start

npm install

npm start 到这就能运行demo了

但是安装依赖npm install会遇到问题

npm install 时,报错 electron@22 postinstall: node install.js

是因为electron也要配置镜像

输入 npm config ls

找到nppmrc文件

添加这两行:第一行是npm的镜像,第二行是electron镜像

bash 复制代码
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/

重新安装依赖

npm install

启动

npm start

界面helloword的demo就出来了。

然后将vue项目打包后的dist目录下的内容全选复制

粘贴到electron-quick-start目录下

打包生成exe文件

项目集成到了electron中,下一步就是打包生成我们需要的桌面端exe文件。

安装插件:

npm install electron-packager --save-dev

在electron-quick-start项目的package.json添加命令行

bash 复制代码
"scripts": {
    "start": "electron .",
    "pack": "electron-packager . my-app-name --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1"
},

my-app-name是打包生成的exe文件名字

./out是输出路径

app-version=0.0.1 是版本号

最后执行npm run pack

最后就在out文件夹生成代码(这个out文件夹是我手动创建,不知道会不会自动创建目录)

双击exe

参考资料:

https://www.51cto.com/article/627670.html

还有一个提供 npm config ls命令方案的大佬,感谢,找不到链接了,这里就不粘贴了

相关推荐
^Rocky31 分钟前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵1 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记1 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
萌萌哒草头将军3 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip3 小时前
http缓存
前端·javascript
JohnYan4 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
陈陈爱java5 小时前
Spring八股文
开发语言·javascript·数据库
@大迁世界5 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
烛阴5 小时前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓5 小时前
Typescript入门-类型断言讲解
前端·javascript·typescript