将vue项目使用electron-egg打包成桌面程序

使用electron-egg打包成桌面程序.exe格式的，electron-egg打包框架一直在进行维护，electron-vue现在不建议使用了，因为已经不维护了，使用这个打包会出现很多毛病，本人就是受害者呀，使用electron-vue打包后iframe、embed、webview都不兼容还有其他一些就不一一举例说明；

第一步：先将vue项目执行指令打包成dist 文件夹

npm run build

第二步：新建一个文件夹使用git指令下载electron-egg框架

# gitee
git clone https://gitee.com/wallace5303/electron-egg.git

# github
git clone https://github.com/wallace5303/electron-egg.git

第三步：先将下载路径都改变成淘宝镜像，不然会非常缓慢

# 推荐node版本 14.16.0

# 设置国内镜像源(加速)
npm config set registry=https://registry.npmmirror.com
npm config set disturl=https://registry.npmmirror.com/-/binary/node
#如果下载electron慢，配置
npm config set electron_mirror=https://registry.npmmirror.com/-/binary/electron/
# 或者挂个VPN

# 进入目录 ./electron-egg/
npm install

# 如果还是提示 electron 没安装，进入 node_modules/electron 目录下，再npm install

第四步：将自己之前打包好的vue项目dist文件复制粘贴到electron-egg框架中public文件里面，将里面下载的dist文件删除，复制进去就行

 第六步：最后就可以打包成桌面程序了

 

# 开发者模式
    # 1：【进入前端目录】，启动前端服务
  cd electron-egg/frontend && npm install && npm run serve
  # 2：【根目录】，启动后端服务
  npm run dev

# 预发布模式（环境变量为：prod）
npm run start

# 打包 windows版本
npm run build-w (32位)
npm run build-w-64 (64位)

# 打包 mac版本
npm run build-m
npm run build-m-arm64 (m1芯片架构)

# 打包 linux版本
npm run build-l

# 移动前端静态资源
npm run rd

# 混淆加密
npm run compress

# 还原
npm run restore
 

 最后小提一句：有任何electron-egg问题不了解或者不知道可以点击下面连接进入查询，为什么我要将文档里面的东西在复制发一遍呢，就是因为你上百度上一搜就只会搜到electron-vue打包方式，这个打包方式出现问题git上面提交问题有没人解答，只能自己干着急，毕竟本人就干着急了三天呀！希望其他前端程序员可以根据我的文档少走更多弯路......

安装 · 语雀