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命令方案的大佬,感谢,找不到链接了,这里就不粘贴了

相关推荐
用户51681661458413 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅3 小时前
JavaScript 作用域
前端·javascript
前端缘梦3 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖3 小时前
JS核心知识-事件循环
前端·javascript
Simon_He3 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
eason_fan4 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
前端付豪5 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮5 小时前
js符号(Symbol)
前端·javascript
大怪v6 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_8 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript