一直想用electron把vue项目打包成桌面应用，网上找教程发现都是vue-cli2.x的，用的人真少导致更新不及时。好在终于在b站上找到了一个解决方案，记录一下。
一、新建vue项目
vue create test
二、进入test项目，安装electron-builder
cd test
vue add electron-builder
选择版本最新的（写这篇文章时版本为11.x）
这个过程中可能会卡在electron-builder依赖包的下载中，导致超时失败，如果没有可以跳过下面的步骤
====================================================================
如果失败，在文件夹
C:\Users\Administrator\AppData\Local
下，新建electron文件夹
找到你对应的版本
右键复制链接地址，在Cache中新建子文件夹，将链接地址作为子文件夹名
下载后将文件放置该目录下
再下载下图文件
这里推荐一个下载软件：Motrix
可以搜索下载并安装，下载github项目会比较快
====================================================================
这个时候项目应该可以run起来了
npm run electron:serve
首次启动会默认安装vue dev tools这个需要科学上网，否则会超时，但不影响项目run起来：
可以在background.js中将如下代码注释掉，就可以跳过以上下载了。
三、打包项目
npm run electron:build
如果下载文件超时：
把刚才的下载的文件在Cache文件夹下再放置一份，或者再次build，一般会自己下载好：
再次build：完成！
在dist目录中就可以看到安装文件了：
安装好后就是这个样子，
如果想自定义图标，安装过程等，可以新建vue.config.js
参考配置：
module.exports = {
pluginoptions: {
electronBuilder: {
builderOptions: {
appId: 'made by liukai',
productName: 'test', //项目名，也是生成的安装文件名，即test.exe
copyright: 'copyright © 2020', //版权信息
directories: {
output: './dist_electron', //输出文件路径
},
win: {
//win相关配置
icon: './turtle.ico', //图标，当前图标在根目录下，注意这个图标必须是256x256
target: [
{
target: 'nsis', //利用nsis制作安装程序
arch: [
'x64', //64位
],
},
],
},
mac: {
//mac相关配置
icon: './turtle.ico', //图标，当前图标在根目录下，注意这个图标必须是256x256
target: [
{
target: 'default',
},
],
},
nsis: {
oneClick: false, // 是否一键安装
allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
allowtochangeInstallationDirectory: true, // 允许修改安装目录
installerIcon: './turtle.ico', // 安装图标
uninstallerIcon: './turtle.ico', //卸载图标
installerHeaderIcon: './turtle.ico', // 安装时头部图标
createDesktopShortcut: true, // 创建桌面图标
createstartmenuShortcut: true, // 创建开始菜单图标
shortcutName: 'test', // 图标名称
},
},
},
},
}
图标文件放置在同级目录下
再次build：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
