Vite + TS + Electron 环境部署

安装环境

npm create vite@latest my-vue-app -- --template vue-ts
npm install
npm install electron -D
npm install electron-builder -D
npm install electron-devtools-installer -D
npm install vite-plugin-electron -D
npm install rimraf -D
npm install
npm audit fix --force

初始化electron

初始化electron主程序

// 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, ”../electron-preload/index.js”), // 需要引用js文件
},
});
// 如果打包了，渲染index.html
if (app.isPackaged) {
win.loadFile(path.join(__dirname, ”../index.html”));
} else {
let url = “http://localhost:3000”; // 本地启动的vue项目路径
win.loadURL(url);
}
};
app.whenReady().then(() => {
createWindow(); // 创建窗口
app.on(“activate”, () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 关闭窗口
app.on(“window-all-closed”, () => {
if (process.platform !== “darwin”) {
app.quit();
}
});

初始化electron前置加载程序

//electron-preload/index.ts
import os from "os";
console.log("platform", os.platform());

修改ts监听程序

"include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "electron-main/**/*.ts",
  "electron-preload/**/*.ts"
],

修改vits配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from “path”;
import electron from “vite-plugin-electron”;
import electronRenderer from “vite-plugin-electron/renderer”;
import polyfillExports from “vite-plugin-electron/polyfill-exports”;
export default defineConfig({
plugins: [
vue(),
electron({
main: {
entry: “electron-main/index.ts”, // 主进程文件
},
preload: {
input: path.join(__dirname, ”./electron-preload/index.ts”), // 预加载文件
},
}),
electronRenderer(),
polyfillExports(),
],
build: {
emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
},
});

修改package信息

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "main": "dist/electron-main/index.js",
  "scripts": {
    "dev": "vite",
    "build": "rimraf dist && vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "electron": "^19.0.0",
    "electron-builder": "^23.0.3",
    "electron-devtools-installer": "^3.2.0",
    "rimraf": "^3.0.2",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vite-plugin-electron": "^0.4.5",
    "vue-tsc": "^0.34.7"
  }
}

打包需要添加的package信息

{
  ......
  "build": {
    "appId": "com.smallpig.desktop",
    "productName": "smallpig",
    "asar": true,
    "copyright": "Copyright © 2022 smallpig",
    "directories": {
      "output": "release/${version}"
    },
    "files": [
      "dist"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

执行打包

npm run build