electron vue项目打包过程

Sun202952

已于 2023-05-15 10:39:42 修改

阅读量534

点赞数

文章标签： vue.js electron javascript

于 2023-04-25 11:41:03 首次发布

本文链接：https://blog.csdn.net/w_ziShan/article/details/130360992

版权

文章讲述了在使用Vue和Electron进行项目打包时遇到的版本不兼容和GitHub镜像问题，提供了修改.npmrc文件以更换镜像源的解决方案，并建议避免使用`electron-vue`，推荐使用`vuecreateelectron-app`直接创建项目，同时强调了版本匹配和项目初始化的注意事项。

摘要由CSDN通过智能技术生成

如果打包出现报错的话可以改一下当前配置的版本，有些其他版本就是会有一些奇奇怪怪的问题，这里是我当前项目的版本完成打包没有问题

// npm版本
D:\Project>npm -v
8.15.0

// node
D:\Project>node -v
v16.17.0

//vue
D:\Project>vue -V
@vue/cli 5.0.8

// 创建项目
vue create electron-app

// 添加electron-builder
vue add electron-builder

// 启动electron
npm run electron:serve

// 打包
npm run electron:build

到这里 \dist_electron会生成electron-app Setup 0.1.0.exe 这样打包就完成了

这里其实是GitHub的原因，需要手动改变仓库地址

将下面代码添加到文件.npmrc 重新执行打包就可以了

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

另外，我之前通过electron-vue创建的项目打包时也遇到各种问题，这里建议暂时解决不了的可以用vue创建这种方法可以避免很多问题...如果有electron-vue顺利打包成功的也可以踢我！

其实打包这个简单的例子之前我有踩过非常过的坑了所以有些地方可以注意

1.不要添加electron（vue add electron），直接添加electron-build

2.版本匹配

3.不要先使用‘vue init simulatedgreg/electron-vue my-project’创建项目（缺少很多文件，后续配置app图标等等都会有很多麻烦...）

4.项目启动慢的话可以注释这段代码

还有其他问题我会继续记录...工作咯

关注