{"id":24,"date":"2023-11-07T22:41:20","date_gmt":"2023-11-07T14:41:20","guid":{"rendered":"https:\/\/www.rwr.ink\/?p=24"},"modified":"2023-11-08T15:43:21","modified_gmt":"2023-11-08T07:43:21","slug":"vite-ts-electron-%e7%8e%af%e5%a2%83%e9%83%a8%e7%bd%b2","status":"publish","type":"post","link":"https:\/\/www.rwr.ink\/index.php\/2023\/11\/07\/vite-ts-electron-%e7%8e%af%e5%a2%83%e9%83%a8%e7%bd%b2\/","title":{"rendered":"Vite + TS + Electron \u73af\u5883\u90e8\u7f72"},"content":{"rendered":"

\u5b89\u88c5\u73af\u5883<\/h4>\n
npm create vite@latest my-vue-app -- --template vue-ts\nnpm install\nnpm install electron -D\nnpm install electron-builder -D\nnpm install electron-devtools-installer -D\nnpm install vite-plugin-electron -D\nnpm install rimraf -D\nnpm install\nnpm audit fix --force<\/code><\/pre>\n
\u521d\u59cb\u5316electron<\/h4>\n
\u521d\u59cb\u5316electron\u4e3b\u7a0b\u5e8f<\/h5>\n
\/\/ electron-main\/index.ts\nimport { app, BrowserWindow } from "electron";\nimport path from "path";\n\nconst createWindow = () => {\n  const win = new BrowserWindow({\n    webPreferences: {\n      contextIsolation: false, \/\/ \u662f\u5426\u5f00\u542f\u9694\u79bb\u4e0a\u4e0b\u6587\n      nodeIntegration: true, \/\/ \u6e32\u67d3\u8fdb\u7a0b\u4f7f\u7528Node API\n      preload: path.join(__dirname, "..\/electron-preload\/index.js"), \/\/ \u9700\u8981\u5f15\u7528js\u6587\u4ef6\n    },\n  });\n\n  \/\/ \u5982\u679c\u6253\u5305\u4e86\uff0c\u6e32\u67d3index.html\n  if (app.isPackaged) {\n    win.loadFile(path.join(__dirname, "..\/index.html"));\n  } else {\n    let url = "http:\/\/localhost:3000"; \/\/ \u672c\u5730\u542f\u52a8\u7684vue\u9879\u76ee\u8def\u5f84\n    win.loadURL(url);\n  }\n};\n\napp.whenReady().then(() => {\n  createWindow(); \/\/ \u521b\u5efa\u7a97\u53e3\n  app.on("activate", () => {\n    if (BrowserWindow.getAllWindows().length === 0) createWindow();\n  });\n});\n\n\/\/ \u5173\u95ed\u7a97\u53e3\napp.on("window-all-closed", () => {\n  if (process.platform !== "darwin") {\n    app.quit();\n  }\n});<\/code><\/pre>\n
\u521d\u59cb\u5316electron\u524d\u7f6e\u52a0\u8f7d\u7a0b\u5e8f<\/h5>\n
\/\/electron-preload\/index.ts\nimport os from "os";\nconsole.log("platform", os.platform());<\/code><\/pre>\n
\u4fee\u6539ts\u76d1\u542c\u7a0b\u5e8f<\/h5>\n
"include": [\n  "src\/**\/*.ts",\n  "src\/**\/*.d.ts",\n  "src\/**\/*.tsx",\n  "src\/**\/*.vue",\n  "electron-main\/**\/*.ts",\n  "electron-preload\/**\/*.ts"\n],<\/code><\/pre>\n
\u4fee\u6539vits\u914d\u7f6e\u6587\u4ef6<\/h5>\n
import { defineConfig } from "vite";\nimport vue from "@vitejs\/plugin-vue";\n\nimport * as path from "path";\nimport electron from "vite-plugin-electron";\nimport electronRenderer from "vite-plugin-electron\/renderer";\nimport polyfillExports from "vite-plugin-electron\/polyfill-exports";\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    electron({\n      main: {\n        entry: "electron-main\/index.ts", \/\/ \u4e3b\u8fdb\u7a0b\u6587\u4ef6\n      },\n      preload: {\n        input: path.join(__dirname, ".\/electron-preload\/index.ts"), \/\/ \u9884\u52a0\u8f7d\u6587\u4ef6\n      },\n    }),\n    electronRenderer(),\n    polyfillExports(),\n  ],\n  build: {\n    emptyOutDir: false, \/\/ \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u82e5 outDir \u5728 root \u76ee\u5f55\u4e0b\uff0c\u5219 Vite \u4f1a\u5728\u6784\u5efa\u65f6\u6e05\u7a7a\u8be5\u76ee\u5f55\n  },\n});\n<\/code><\/pre>\n
\u4fee\u6539package\u4fe1\u606f<\/h5>\n
{\n  "name": "my-vue-app",\n  "private": true,\n  "version": "0.0.0",\n  "main": "dist\/electron-main\/index.js",\n  "scripts": {\n    "dev": "vite",\n    "build": "rimraf dist && vite build && electron-builder",\n    "preview": "vite preview"\n  },\n  "dependencies": {\n    "vue": "^3.2.25"\n  },\n  "devDependencies": {\n    "@vitejs\/plugin-vue": "^2.3.3",\n    "electron": "^19.0.0",\n    "electron-builder": "^23.0.3",\n    "electron-devtools-installer": "^3.2.0",\n    "rimraf": "^3.0.2",\n    "typescript": "^4.5.4",\n    "vite": "^2.9.9",\n    "vite-plugin-electron": "^0.4.5",\n    "vue-tsc": "^0.34.7"\n  }\n}<\/code><\/pre>\n
\u6253\u5305\u9700\u8981\u6dfb\u52a0\u7684package\u4fe1\u606f<\/h5>\n
{\n  ......\n  "build": {\n    "appId": "com.smallpig.desktop",\n    "productName": "smallpig",\n    "asar": true,\n    "copyright": "Copyright \u00a9 2022 smallpig",\n    "directories": {\n      "output": "release\/${version}"\n    },\n    "files": [\n      "dist"\n    ],\n    "mac": {\n      "artifactName": "${productName}_${version}.${ext}",\n      "target": [\n        "dmg"\n      ]\n    },\n    "win": {\n      "target": [\n        {\n          "target": "nsis",\n          "arch": [\n            "x64"\n          ]\n        }\n      ],\n      "artifactName": "${productName}_${version}.${ext}"\n    },\n    "nsis": {\n      "oneClick": false,\n      "perMachine": false,\n      "allowToChangeInstallationDirectory": true,\n      "deleteAppDataOnUninstall": false\n    },\n    "publish": [\n      {\n        "provider": "generic",\n        "url": "http:\/\/127.0.0.1:8080"\n      }\n    ],\n    "releaseInfo": {\n      "releaseNotes": "\u7248\u672c\u66f4\u65b0\u7684\u5177\u4f53\u5185\u5bb9"\n    }\n  }\n}<\/code><\/pre>\n
\u6267\u884c\u6253\u5305<\/h5>\n
npm run build<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Vite + TS + Electron \u73af\u5883\u90e8\u7f72\u6458\u8981\uff1a\u5b66\u4e60\u5982\u4f55\u5728Vite + TypeScript + Electron\u73af\u5883\u4e2d\u8fdb\u884c\u73af\u5883\u90e8\u7f72\u6b65\u9aa4\uff0c\u5305\u62ec\u5b89\u88c5\u5fc5\u8981\u7684\u4f9d\u8d56\u3001\u521d\u59cb\u5316Electron\u3001\u4fee\u6539\u76f8\u5173\u914d\u7f6e\u6587\u4ef6\u4ee5\u53ca\u6253\u5305\u53d1\u5e03\u5e94","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[1],"tags":[5,4],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-linux","tag-4"],"_links":{"self":[{"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":1,"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/posts\/24\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rwr.ink\/index.php\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}