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

相关推荐
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科4 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
EndingCoder6 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔6 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀6 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
liangshanbo12158 小时前
React 19 vs React 18全面对比
前端·javascript·react.js