使用electron打包vuecli创建的项目

下面是我打包的时候才过的所有的坑💣:

  1. 首先创建一个vue2的空项目,如果全局安装的vue-cli版本太低,低于3就无法使用vue create命令,必须使用uninstall将之前的卸载掉,在重现安装,之后的就是最近的版本。
  2. 首先一定要先去执行一遍vue add electron-builder安装依赖,过程中不能有报错,我的node版本为16.18.0,成功之后就会发现多了一个background.js文件,还有脚本中多了几个打包electron的命令。
    在这里插入图片描述
  3. 在安装这个electron-builder包的时候,必须将镜像进行设置: npm config set electron_mirror https://npmmirror.com/mirrors/electron/
  4. 设置好镜像之后使用npm install electron electron-builder -g全局安装electron-builder
  5. 对于图标的设置一定要有严格的设置,可以去参考https://www.butterpig.top/icopro网站上进行生成,图标大小一定要选择256×256的,icon类型是用于windows系统桌面的
  6. 打包过程中一定要退出电脑管家等杀毒软件,不然就会提示Fatal error: Unable to commit changes
  7. 打包的路径一定不要包含任何有关中文的文字或符号
  8. 还有一定要详细阅读下面的两篇文章如下:
    https://www.jianshu.com/p/2addf336ab91
    https://www.jianshu.com/p/1dbb96bc8f37
  9. 在参考完第八条之后相信已经配置好了环境,环境配置很难,不要轻易重装电脑,更不要删除本机C:\Users\Administrator\AppData\Local\electron-builder\Cache下面的的任何文件(都是手动加入的,不然无法打包)
  10. 把下面的代码拷贝至vue.config.js文件中

如果有谁还是无法打包可以联系我,我可以远程帮忙,不过一定要记得要先一键三连哦😆😆😆!!!

const { defineConfig } = require('@vue/cli-service')
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "inspect.cnsbdz.com/",
        productName: "xxxx软件", //项目名,也是生成的安装文件名,即aDemo.exe
        copyright: "Copyright © 2018", //版权信息
        directories: {
          output: "./exeSetUpDist", //输出文件路径,之前编译的默认是dist_electron
        },
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: "./public/favicon.ico", // 安装图标
          uninstallerIcon: "./public/favicon.ico", //卸载图标
          installerHeaderIcon: "./public/favicon.ico", // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true, // 创建开始菜单图标
          shortcutName: "xxxx软件", // 图标名称
        },
        win: {
          icon: "./public/favicon.ico",
          target: [
            {
              target: "nsis", //使用nsis打成安装包,"portable"打包成免安装版
              arch: [
                "x64", //64位
                "ia32", //32位
              ],
            },
          ],
        },
        mac: {
          icon: path.join(__dirname, "./public/favicon.ico"),
        },
        linux: {
          icon: path.join(__dirname, "./public/favicon.ico"),
        },
      },
      publish: [
        {
          provider: "generic", // 服务器提供商,也可以是GitHub等等
          url: "http://xxxxx/", // 服务器地址
        },
      ],
    },
  },
})

然后就可以开始打包了。
在这里插入图片描述
最后打完包成功了的话时这样子的
在这里插入图片描述

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白嫖leader

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值