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

相关推荐
飞鸟真人1 小时前
VUE+Electron从0开始搭建开发环境
electron·vue
麦麦大数据1 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区3 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小光学长3 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
YiHanXii4 小时前
this 输出题
前端·javascript·1024程序员节
维他命Coco4 小时前
js常见开发学习
javascript
麦麦大数据4 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
橙子199110165 小时前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin
!win !6 小时前
分享二个实用正则
javascript·正则表达式
xw56 小时前
分享二个实用正则
javascript·正则表达式