electron+vue创建项目-打包exe

香-农

已于 2024-03-23 23:20:33 修改

阅读量745

点赞数 11

分类专栏： VUE 文章标签： vue.js electron javascript

于 2024-01-12 15:03:26 首次发布

本文链接：https://blog.csdn.net/qq_28205917/article/details/135553318

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

当前使用环境脚手架版本
node版本：v16.20.1

npm版本：8.19.4

vue版本：@vue/cli 5.0.8

一、vue创建项目：选的vue2

vue create app4

二、添加electron脚手架

vue add electron-builder

- 安装脚手架提示选择：yes

- electron版本选择：13

- 安装完成

三、运行命令

npm run electron:serve

四、运动后报错：下载Vue Devtools失败，在此处理是关掉该下载(网上还有其它处理办法)；

修改src/background.js文件

- 然后再次运行即可；

五、隐藏菜单，修改src/background.js，在这两处进行修改；

六、build打包

npm run electron:build

- 报错1：

electron版本：13.6.9

所需下载：electron-v13.6.9-win32-x64.zip、winCodeSign-2.6.0(ZIP)、nsis-3.0.4.2.7z、nsis-resources-3.4.1.7z

方法一：(推荐，只能说丝滑)
1、根目录下创建.npmrc文件

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

2、然后运行打包，世界突然就片寂静；

方法二：

https://github.com/electron/electron/releases/download/v13.6.9/electron-v13.6.9-win32-x64.zip https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.6.0 https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.4.2 https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-resources-3.4.1

1、electron-v13.6.9-win32-x64文件路径：C:\Users\shannon\AppData\Local\electron\Cache

2、winCodeSign文件路径：C:\Users\shannon\AppData\Local\electron\Cache，需手动插件一个winCodeSign文件

3、文件路径：C:\Users\AppData\Local\electron\Cache\nsis (.7z文件无需解压)

4、文件路径：C:\Users\AppData\Local\electron\Cache\nsis (.7z文件无需解压)

七、自定义打包安装：

当走到第六步骤时且问题都解决完，发现build后发现打包出来的setup.exe安装程序是默认安装并且没自定义图标的；

1、配置vue.config.js文件

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.example.app4",
        productName: "app4", //应用名，即安装文件名，如：aDemo.exe
        copyright: "Copyright © 2023", //版权信息
        directories: {
          output: "./dist_electron", //输出文件路径
        },
        mac: {
          icon: "./public/logo.png", //图标路径
        },
        win: {
          //win相关配置
          icon: "./public/logo.png", //图片：ico货png格式（像素256x256）
          target: [
            {
              target: "nsis", //利用nsis制作安装程序
              arch: [
                "x64", //64位
                "ia32", //32位
              ],
            },
          ],
        },
        nsis: {
          oneClick: false, // 一键安装
          allowElevation: true, // 是否开启安装时权限限制（此电脑或当前用户）
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: "./public/logo.ico", //图片：ico格式（像素256x256）
          uninstallerIcon: "./public/logo.ico", //图片：ico格式（像素256x256）
          installerHeaderIcon: "./public/logo.ico", //图片：ico格式（像素256x256）
          createDesktopShortcut: true,// 创建桌面图标
          createStartMenuShortcut: true,// 创建开始菜单图标
          shortcutName: "demo", // 图标名称(可注释)
        },
      },
    },
  },
};