Vue+Electron创建桌面应用(个人笔记)

1. 首先创建一个vue应用

image.png

2. 添加vue-cli-plugin-electron-builder插件

vue add electron-builder

image.png

3. 运行

修改了vue默认的页面。

npm run electron:serve

这时已经可以运行起来了

image.png

4. background.js

目录里比一般的vue项目多了一个background.js文件，这是electron主进程文件 ，这个文件在 src/下面。

image.png

这时我们修改代码，视图就会相应改变了。打开控制台的快捷键是ctrl+shift+i。

5. 打包

npm run electron:build

打包之后会生成一个.exe文件，这个文件在dist_electron/下面。

image.png

这时只要跟平时安装其他应用一样，在文件资源管理器里面双击该文件就可以直接安装了。安装成功之后桌面会有一个electron应用的默认图标。

6. 自定义图标

安装打包工具electron-builder和electron-icon-builder

cnpm i electron-builder --D
cnpm i electron-icon-builder 

package.json中scripts添加build-icon指令

image.png

打包图片

npm run build-icon

打包之后会生成各种格式大小的图片

image.png

7. 修改vue.config.js

因为我们之前安装的插件是 vue-cli-plugin-electron-builder ，而不是electron-builder。
electron-builder打包普通项目，build 配置直接在package.json 里面写。
vue-cli-plugin-electron-builder的 build 配置是需要在 项目根目录下 vue.config.js 里面配置。
如果没有请新建。

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.test.app",
        productName: "Lang", //项目名，也是生成的安装文件名，即aDemo.exe
        copyright: "Copyright © 2021", //版权信息
        directories: {
          output: "./dist" //输出文件路径
        },
        win: {
          //win相关配置
          icon: "./build/icons/icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
          target: [
            {
              target: "nsis", //利用nsis制作安装程序,打包文件的后缀为exe
              arch: [
                "x64", //64位
                "ia32" //32位
              ]
            }
          ]
        },
        nsis: {
          oneClick: false, //一键安装
          language: "2052", //安装语言
          perMachine: true, //应用所有用户
          allowToChangeInstallationDirectory: true //用户可以选择路径
        }
      }
    }
  }
};

8. 最后再次打包

npm run electron:build

此时生成的.exe文件就是自定义图标的应用文件了，而且根据配置用户可以自己选择安装路径。安装成功之后即可像打开其他应用一样打开了。

可能遇到的问题：

打包失败或者打包之后图标没有改变。
解决方法：
打包好的.exe文件放在我们之前配置的build output: "./dist" //输出文件路径，然后重新打包。

参考文章：https://juejin.cn/post/7015476516196712462#heading-16