vue+electron初学运行指南

突然要接触打包程序接触到electron，可给我痛苦的呀！

整理一下使用过程吧

首先，我使用的npm以及node版本如下

因为之前因为版本不兼容好像有的依赖装不进去

接着，我们重新创建一个vue项目并进入目录

vue create my_electron

cd my_electron

 安装一下依赖

yarn install

因为npm太慢了，所以我就用yarn了 

添加一个electron的插件 

vue add electron-builder

 

插件安装成功应该像上面一样 

启动electron项目

 npm run electron:serve

 

当你项目运行成功后，你的src下会多出一个background.js文件

 

如果你启动缓慢的话，可以把background.js中的这么一段代码注释掉

 

有没有变得飞起 

准备开始要正式打包了

打包前我们需要去网上找到几个包本地下载放到对应目录下

直接下载对应版本winCodeSign和nsis到本地，比如我的版本是winCodeSign-2.6.0.7z和nsis-3.0.4.1.7z

下载后放于对应目录 windows: %LOCALAPPDATA%\electron-builder\Cache

在Cache目录下创建nsis和winCodeSign

将对应的压缩包拷贝到目录中去完整解压

最终效果如下：

在vue.config.js中添加打包相关配置项

module.exports = {

  pluginOptions: {

    electronBuilder: {

      "customFileProtocol": "./", //增加此项让css中相对引用的文件能正常访问，否则一些css库中的字体会无法显示

      "builderOptions": {

        "extraResources": [

          "./extraResources/**", //这里指定外部资源文件夹，你可以把一些外部程序放在./extraResources中，比如ffmpeg等，打包时electron将直接原样拷贝

          "./node_modules/@electron/remote/**",//必须添加这一行否则remote会引用不到

        ],

        "productName": "your app name",

        "appId": "your.app.appId",

        "copyright":"Copyright © your name 2021",// 版权信息

        "directories": {

          "output": "./build" //输出文件夹

        },

        // "afterSign": "./notarize.js", //签名文件

        "dmg": { //输出mac的dmg时图标位置

          "contents": [

            {

              "x": 410,

              "y": 150,

              "type": "link",

              "path": "/Applications"

            },

            {

              "x": 130,

              "y": 150,

              "type": "file"

            }

          ]

        },

        "win": {

          "icon": "./icons/icon256.ico",//win打包图标

          "target": [{

            "target": "nsis",// 利用 nsis 制作安装程序

            "arch": [

              "x64",//64 位

            ]

          }]

        },

        "nsis": {

          "oneClick": false, // 是否一键安装

          "allowElevation": true, // 允许请求提升. 如果为 false, 则用户必须使用提升的权限重新启动安装程序.

          "allowToChangeInstallationDirectory": true, // 允许修改安装目录

          "installerIcon": "./icons/icon256.ico",// 安装图标

          "uninstallerIcon": "./icons/icon256.ico",// 卸载图标

          "installerHeaderIcon": "./icons/icon256.ico", // 安装时头部图标

          "createDesktopShortcut": true, // 创建桌面图标

          "createStartMenuShortcut": true,// 创建开始菜单图标

          "shortcutName": "DNG自动转换工具", // 图标名称

          "perMachine": true

        },

      }

    }

  },

  configureWebpack: config => {

    return {}//webpack相关配置

  }

}

项目下新建icons文件夹用于存放图标 

win的用icon256.ico当图标

 最后，进打包指令

npm run electron:build

成功打包后会在该目录底下出现这样一个exe可执行文件