Vite + TS + Electron 环境部署

安装环境

1
npm create vite@latest my-vue-app -- --template vue-ts
2
npm install
3
npm install electron -D
4
npm install electron-builder -D
5
npm install electron-devtools-installer -D
6
npm install vite-plugin-electron -D
7
npm install rimraf -D
8
npm install
9
npm audit fix --force

初始化electron

初始化electron主程序

1
import { app, BrowserWindow } from "electron";
2
import path from "path";
3

4
const createWindow = () => {
5
  const win = new BrowserWindow({
6
    webPreferences: {
7
      contextIsolation: false, // 是否开启隔离上下文
8
      nodeIntegration: true, // 渲染进程使用Node API
9
      preload: path.join(__dirname, "../electron-preload/index.js"), // 需要引用js文件
10
    },
11
  });
12

13
  // 如果打包了，渲染index.html
14
  if (app.isPackaged) {
15
    win.loadFile(path.join(__dirname, "../index.html"));
16
  } else {
17
    let url = "http://localhost:3000"; // 本地启动的vue项目路径
18
    win.loadURL(url);
19
  }
20
};
21

22
app.whenReady().then(() => {
23
  createWindow(); // 创建窗口
24
  app.on("activate", () => {
25
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
26
  });
27
});
28

29
// 关闭窗口
30
app.on("window-all-closed", () => {
31
  if (process.platform !== "darwin") {
32
    app.quit();
33
  }
34
});

初始化electron前置加载程序

1
import os from "os";
2
console.log("platform", os.platform());

修改ts监听程序

1
"include": [
2
  "src/**/*.ts",
3
  "src/**/*.d.ts",
4
  "src/**/*.tsx",
5
  "src/**/*.vue",
6
  "electron-main/**/*.ts",
7
  "electron-preload/**/*.ts"
8
],

修改vits配置文件

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

4
import * as path from "path";
5
import electron from "vite-plugin-electron";
6
import electronRenderer from "vite-plugin-electron/renderer";
7
import polyfillExports from "vite-plugin-electron/polyfill-exports";
8

9
export default defineConfig({
10
  plugins: [
11
    vue(),
12
    electron({
13
      main: {
14
        entry: "electron-main/index.ts", // 主进程文件
15
      },
16
      preload: {
17
        input: path.join(__dirname, "./electron-preload/index.ts"), // 预加载文件
18
      },
19
    }),
20
    electronRenderer(),
21
    polyfillExports(),
22
  ],
23
  build: {
24
    emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
25
  },
26
});

修改package信息

1
{
2
  "name": "my-vue-app",
3
  "private": true,
4
  "version": "0.0.0",
5
  "main": "dist/electron-main/index.js",
6
  "scripts": {
7
    "dev": "vite",
8
    "build": "rimraf dist && vite build && electron-builder",
9
    "preview": "vite preview"
10
  },
11
  "dependencies": {
12
    "vue": "^3.2.25"
13
  },
14
  "devDependencies": {
15
    "@vitejs/plugin-vue": "^2.3.3",
16
    "electron": "^19.0.0",
17
    "electron-builder": "^23.0.3",
18
    "electron-devtools-installer": "^3.2.0",
19
    "rimraf": "^3.0.2",
20
    "typescript": "^4.5.4",
21
    "vite": "^2.9.9",
22
    "vite-plugin-electron": "^0.4.5",
23
    "vue-tsc": "^0.34.7"
24
  }
25
}

打包需要添加的package信息

1
{
2
  ......
3
  "build": {
4
    "appId": "com.smallpig.desktop",
5
    "productName": "smallpig",
6
    "asar": true,
7
    "copyright": "Copyright © 2022 smallpig",
8
    "directories": {
9
      "output": "release/${version}"
10
    },
11
    "files": [
12
      "dist"
13
    ],
14
    "mac": {
15
      "artifactName": "${productName}_${version}.${ext}",
16
      "target": [
17
        "dmg"
18
      ]
19
    },
20
    "win": {
21
      "target": [
22
        {
23
          "target": "nsis",
24
          "arch": [
25
            "x64"
26
          ]
27
        }
28
      ],
29
      "artifactName": "${productName}_${version}.${ext}"
30
    },
31
    "nsis": {
32
      "oneClick": false,
33
      "perMachine": false,
34
      "allowToChangeInstallationDirectory": true,
35
      "deleteAppDataOnUninstall": false
36
    },
37
    "publish": [
38
      {
39
        "provider": "generic",
40
        "url": "http://127.0.0.1:8080"
41
      }
42
    ],
43
    "releaseInfo": {
44
      "releaseNotes": "版本更新的具体内容"
45
    }
46
  }
47
}

执行打包

1
npm run build

Vite + TS + Electron 环境部署

安装环境

初始化electron

初始化electron主程序

初始化electron前置加载程序

修改ts监听程序

修改vits配置文件

修改package信息

打包需要添加的package信息

执行打包

文章分享