使用Electron对Vue项目改造

发布网友 发布时间：2024-09-08 19:06

我来回答

共1个回答

热心网友 时间：2024-09-30 12:35

如何将vue项目web项目打包成客户端呢？今天就来说一下升级改造的过程以及遇到的坑。

改造项目为vue2的web端项目，使用element-admin后台框架。

elelctron：elelctron-vue脚手架可以快速生成一个项目模板(使用命令vueinitsimulatedgreg/electron-vuemy-project),如果是现有的vue项目可以直接安装electron-builder。

node环境，必须大于14，先决条件。同时为了便于开发，必须在开发环境实时编译才算初步成功。

vueaddelectron-builder这个必须要安装成功，但是在安装的时候又极易出现各种奇奇怪怪的问题，总结问题主要有两个，一个是node版本可能不对，另一个是网络问题。可以尝试切换npm路径为淘宝镜像，这里推荐路径管理工具nrmnpminrmnrmls查看所有路径

nrmusetaobao切换路径

安装完electron-builder,项目中会多出一个background.js文件，是electron-builder入口文件，可以配置高度，以及渲染文件的路径。

安装完成后，page.json中会有运行、打包命令，我们再配置具体打包的平台命令

执行npmrundist-mac打包，打包成功后在dist_electron目录下会生成安装文件，如打包mac会生成dmg文件。

（1）electron-v2.0.18-darwin-x64.zip这个包一般都下不下来,需要手动下载，下载文件后将文件放入对应路径，

在win的目录为**C:\Users***\AppData\Local\electron\Cache在mac的目录为~/Library/Caches/electron/淘宝镜像下载electron-v2.0.18-darwin-x64.zip文件地址为https://npm.taobao.org/mirrors/electron/要将SHA这个text文件一起下载，下载地址https://github.com/electron/electron/releases

（2）打包遇到其他文件下载问题，参考资料Mac安装electron缓慢的3种解决方案https://blog.csdn.net/simplehouse/article/details/95594955\Electron打包问题：electron-builder下载各种依赖出错https://blog.csdn.net/cctvcqupt/article/details/87904368\electron入坑指南https://www.cnblogs.com/xueyoucd/p/8006610.html\electron淘宝镜像地址https://npm.taobao.org/mirrors/electron/

安装打包后文件，会发现有些网络问题需要修改。主要为生产环境下请求地址问题，例如BASE_URL=‘http://api.wtr.ic.zx:30080'?+process.env.VUE_APP_BASE_API验证码问题也要补全请求地址