Vue3 + Vite + Electron + TS 项目构建

效果图

1. 创建项目

运行命令，选择 vue + ts

pnpm create vite

2. 安装依赖

2.1 electron

pnpm add electron -D

2.2 electron-builder

打包工具

pnpm add electron-builder -D

2.3 electron-devtools-installer

开发工具

pnpm add electron-devtools-installer -D

2.4 vite-plugin-electron、vite-plugin-electron-renderer

集成 Vite 和 Electron，方便后续在渲染进程中使用 Node API 或 Electron API

pnpm add vite-plugin-electron -D

pnpm add vite-plugin-electron-renderer -D

2.5 rimraf

快速删除文件和文件夹

pnpm add rimraf -D

3. 创建 electron 窗口

根目录创建 electron 文件夹，创建 index.ts、preload.ts

3.1 编辑 index.ts

// electron-main/index.ts

import { app, BrowserWindow } from "electron";

import path from "path";



const createWindow = () => {

  const win = new BrowserWindow({

    webPreferences: {

      contextIsolation: false, // 是否开启隔离上下文

      nodeIntegration: true, // 渲染进程使用Node API

      preload: path.join(__dirname, "./preload.js"), // 需要引用js文件

    },

  });



  // 如果打包了，渲染index.html

  if (process.env.NODE_ENV !== "development") {

    win.loadFile(path.join(__dirname, "./index.html"));

    win.webContents.openDevTools();

  } else {

    let url = "http://localhost:5173"; // 本地启动的vue项目路径。注意：vite版本3以上使用的端口5173；版本2用的是3000

    win.loadURL(url);

    win.webContents.openDevTools();

  }

};



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

  createWindow(); // 创建窗口

  app.on("activate", () => {

    if (BrowserWindow.getAllWindows().length === 0) createWindow();

  });

});



// 关闭窗口

app.on("window-all-closed", () => {

  if (process.platform !== "darwin") {

    app.quit();

  }

});

3.2 编辑 preload.ts

// electron-preload/preload.ts

import os from "os";

console.log("platform", os.platform());

4. 编辑 tsconfig.app.json

将 electron 文件下的 ts 文件添加到编译

{

  "compilerOptions": {

    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "target": "ES2020",

    "useDefineForClassFields": true,

    "module": "ESNext",

    "lib": ["ES2020", "DOM", "DOM.Iterable"],

    "skipLibCheck": true,



    /* Bundler mode */

    "moduleResolution": "Bundler",

    "allowImportingTsExtensions": true,

    "isolatedModules": true,

    "moduleDetection": "force",

    "noEmit": true,

    "jsx": "preserve",



    /* Linting */

    "strict": true,

    "noUnusedLocals": true,

    "noUnusedParameters": true,

    "noFallthroughCasesInSwitch": true,

    "noUncheckedSideEffectImports": true

  },

  "include": [

    "src/**/*.ts",

    "src/**/*.tsx",

    "src/**/*.vue",

    "electron/**/**.ts"

  ]

}

5. 编辑 vite.config.ts

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";



import electron from "vite-plugin-electron";

import electronRenderer from "vite-plugin-electron-renderer";



export default defineConfig(({ mode }) => ({

  base: mode == "development" ? "" : "./",

  plugins: [

    vue(),

    electron([

      {

        entry: "electron/index.ts", // 主进程文件

      },

      {

        entry: "electron/preload.ts",

      },

    ]),

    electronRenderer(),

  ],

  build: {

    emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录

    outDir: "dist-electron",

  },

}));

6. 编辑 package.json

{

  "name": "electron-vue3-ts-vite",

  "private": true,

  "version": "0.0.0",

  "main": "dist-electron/index.js",

  "scripts": {

    "dev": "vite",

    "build": "vue-tsc -b && rimraf dist-electron && vite build && electron-builder",

    "preview": "vite preview"

  },

  "dependencies": {

    "vue": "^3.2.47"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^4.1.0",

    "electron": "^25.2.0",

    "electron-builder": "^24.4.0",

    "electron-devtools-installer": "^3.2.0",

    "rimraf": "^5.0.1",

    "typescript": "^5.0.2",

    "vite": "^4.3.9",

    "vite-plugin-electron": "^0.12.0",

    "vite-plugin-electron-renderer": "^0.14.5",

    "vue-tsc": "^1.4.2"

  },

  "build": {

    "appId": "com.electron.desktop",

    "productName": "electron",

    "asar": true,

    "copyright": "Copyright © 2022 electron",

    "directories": {

      "output": "release/${version}"

    },

    "files": ["./dist", "./package.json", "./dist-electron"],

    "mac": {

      "artifactName": "${productName}_${version}.${ext}",

      "target": ["dmg"]

    },

    "win": {

      "target": [

        {

          "target": "nsis",

          "arch": ["x64"]

        }

      ],

      "artifactName": "${productName}_${version}.${ext}"

    },

    "nsis": {

      "oneClick": false,

      "allowElevation": true,

      "allowToChangeInstallationDirectory": true,

      "installerIcon": "public/timg.ico",

      "uninstallerIcon": "public/timg.ico",

      "installerHeader": "public/timg.ico",

      "installerHeaderIcon": "public/timg.ico",

      "installerSidebar": "public/installerSiddebar.bmp",

      "uninstallerSidebar": "public/uninstallerSiddebar.bmp",

      "uninstallDisplayName": "${productName}${version}",

      "createDesktopShortcut": true,

      "createStartMenuShortcut": true,

      "shortcutName": "TestApp",

      "include": "script/installer.nsi",

      "script": "script/installer.nsi",

      "deleteAppDataOnUninstall": false,

      "runAfterFinish": true,

      "menuCategory": false

    },

    "publish": [

      {

        "provider": "generic",

        "url": "http://127.0.0.1:8080"

      }

    ],

    "releaseInfo": {

      "releaseNotes": "版本更新的具体内容"

    }

  }

}