使用Electron + Vue3 + TS搭建桌面端应用并可热更新-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用Electron + Vue3 + TS搭建桌面端应用并可热更新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以下是必要的技术:

Electron 13.0.0
Vue3 + TS
Electron-updater
Node 16.13.1
Element-plus
Less
Meansjs

搭建Vue3项目

安装Vue-cli（如果未安装）: npm install -g @vue/cli
创建Vue3项目：vue create electron-vue3
启动项目：yarn serve

安装Electron

安装Electron：vue add electron-builder
启动项目：yarn electron:serve
如果报错，需要安装ts-loader: yarn add ts-loader@8.2.0
修改background.ts文件中的代码（将await installExtension(VUEJS3_DEVTOOLS)改为session.defaultSession.loadExtension( path.resolve(__dirname, "../devTools/chrome"))）。

创建主进程文件

在src文件夹中创建host文件，并在其中添加index.ts文件。
在index.ts文件中添加代码（窗口最小化、最大化、关闭操作）。
修改background.ts文件并导入host文件。
遇到启动速度很慢的问题，可以将background.ts文件中的await installExtension(VUEJS3_DEVTOOLS)替换为session.defaultSession.loadExtension( path.resolve(__dirname, "../devTools/chrome"))，并对new BrowserWindow参数进行一些调整。

配置vue.config.js文件

复制以下代码，并根据需要修改appId、icon、guid、include等参数。

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    externals: {
      'electron': 'require("electron")'
    },
  },
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      mainProcessFile: "src/background.ts",
      rendererProcessFile: "src/main.ts",
      customFileProtocol: "../",
      builderOptions: {
        appId: "com.zhuhong.vue3",
        productName: "JSON工具",
        win: {
          icon: "./src/assets/login-icon.png",
          target: {
            target: "nsis",
            arch: ["x64"],
          },
        },
        nsis: {
          allowElevation: true,
          oneClick: false,
          allowToChangeInstallationDirectory: true,
          "guid": "com.zhuhong.vue3",
          "include": "./installer.nsh"
        },
      },
    },
  },
})

创建installer.nsh文件，并将以下代码复制进去：

!macro customInit
DeleteRegKey HKLM "Software\\Microsoft\\Windows\\CurrentVersion\\Uninstall\\com.zhuhong.vue3"
!macroend

打包：yarn electron:build

热更新

安装electron-updater：yarn add electron-updater
创建JSPatch文件，并将以下代码复制进去：

import { ipcMain } from "electron";
const { autoUpdater } = require("electron-updater");

autoUpdater.autoDownload = false;
autoUpdater.autoInstallOnAppQuit = true;

autoUpdater.setFeedURL({
  provider: 'generic',
  url: 'https://', // 打包文件存放地址
});

export default (win:any)=>{
  function sendStatusToWindow(status?:any, params?:any) {
    win.webContents.send(status, params);
  }

  autoUpdater.on('checking-for-update', () => {
    sendStatusToWindow('Checking for update...');
  })
  autoUpdater.on('update-available', (info:any) => {
    sendStatusToWindow('autoUpdater-canUpdate',