【桌面软件】使用Electron+vue+ts打造一个桌面软件（包括生成安装包）

本篇技术文主要步骤是

1. 先搭建vue3+ts项目
2. 然后把electron库使用pnpm安装
3. 创建electron主进程和预先执行的文件
4. 最后配置合成项目（包括使electron主进程ts模块化，electron入口文件）

第一步：

第一步请看使用vite搭建vue3项目（超简单）这篇博文。

第二步：

使用pnpm依次安装以下安装包

 "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",  //vite插件包
    "concurrently": "^7.0.0", //执行多个命令包
    "cross-env": "^7.0.3", //跨环境设置环境变量包
    "electron": "^17.1.1", //electron桌面软件包
    "electron-builder": "^22.14.13", //electron软件打包
    "electron-devtools-installer": "^3.2.0", //elelctron辅助安装工具
    "typescript": "^4.5.4", 
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }

成功之后走第三步，中间如遇到安装elelctron问题，可以尝试更换网络。

第三步：

在项目目录根目录创建一个electron文件夹，里面创建main.ts和preload.ts，如下

其中main.ts代码：

const { app, BrowserWindow } = require("electron");
const path = require("path");
console.log(process.env.MODE);
const loadUrl = process.env.MODE === "devlopment" ? "http://localhost:3000/" : path.join(__dirname, "../src/index.html");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      // nodeIntegration: true,
    },
  });

  win.loadURL(loadUrl);
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

其中preload.ts代码：

window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ["chrome", "node", "electron"]) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

然后再修改vite.config.ts为以下代码：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  if (command === "build") {
    console.log("vite");
  }
  return {
    plugins: [vue()],
    base: "", //解决编译后白屏问题， 默认是'/'
    build: {
      outDir: "dist/src",
    },
  };
});

第四步：

最后在package.json中script添加命令行脚本：

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "electron-tsc": "tsc electron/main.ts electron/preload.ts --outDir dist/main",
    "electron:build": "pnpm build && pnpm electron-tsc",
    "electron-dev": "cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true MODE='devlopment' electron .",
    "electron:dev": "pnpm electron-tsc && concurrently \"pnpm dev\" \"pnpm electron-dev\"",
    "preview": "vite preview",
    "app:build": "pnpm electron:build && pnpm electron-builder"
  },

还得再package.json中添加"main": "dist/main/main.js",
最后package.json如下：

{
  "name": "vue3-instance-app",
  "private": true,
  "version": "0.0.0",
  "main": "dist/main/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "electron-tsc": "tsc electron/main.ts electron/preload.ts --outDir dist/main",
    "electron:build": "pnpm build && pnpm electron-tsc",
    "electron-dev": "cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true MODE='devlopment' electron .",
    "electron:dev": "pnpm electron-tsc && concurrently \"pnpm dev\" \"pnpm electron-dev\"",
    "preview": "vite preview",
    "app:build": "pnpm electron:build && pnpm electron-builder"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
    "electron": "^17.1.1",
    "electron-builder": "^22.14.13",
    "electron-devtools-installer": "^3.2.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  },
}

最后执行命令：pnpm electron:dev

成功显示：

桌面软件成功：

最后做生产环境打包为桌面软件安装包

前面安装了electron-builder，现在只需在package.json配置顶层对象添加以下:

"build": {
    "appId": "com.example.app",
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./public/favicon.ico"
    },
    "files": [
      "dist"
    ],
    "directories": {
      "output": "electron_dist"
    }
  }

然后命令行执行pnpm app:build

打包成功：

项目就会出现一个electron_dist文件夹：

双击exe就可执行安装程序，这是个安装包，发给对方windows电脑，对方就能使用你开发的软件了。

安装成功后就会在桌面生成一个软件图标：

点击即可运行：

自此，完成了windows桌面软件打包。