electron打包部署vue项目

雨中奔跑的小孩2024-11-27 16:34

背景：面试时提供一个开源代码包，把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命令方案的大佬，感谢，找不到链接了，这里就不粘贴了