[デスクトップソフトウェア] Electron+vue+ts を使用してデスクトップソフトウェアを作成します (インストールパッケージの生成を含む)

この技術記事の主な手順は次のとおりです。

最初に vue3+ts プロジェクトをビルドします
次に、pnpmを使用して電子ライブラリをインストールします。
Electron メインプロセスと事前実行ファイルを作成する
最後に、合成プロジェクトを設定します（電子メインプロセスtsと電子エントリファイルのモジュール化を含む）

最初の一歩：

最初のステップとして、vite を使用した vue3 プロジェクトのビルド (非常に簡単) に関するこのブログ投稿をお読みください。

ステップ2：

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"
  }

成功したら、3 番目のステップに進み、electron のインストールで問題が発生した場合は、ネットワークを変更してみてください。

3番目のステップ:

次のように、プロジェクトディレクトリのルートディレクトリに 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",
    },
  };
});

4番目のステップ:

最後に、package.json スクリプトにコマンドラインスクリプトを追加します。

  "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 デスクトップソフトウェアのパッケージ化が完了しました。