ToB企服应用市场:ToB评测及商务社交产业平台

标题: Electron + ts + vue3 + vite [打印本页]

---

作者: 立聪堂德州十三局店    时间: 2024-10-14 19:40
标题: Electron + ts + vue3 + vite

• 正常搭建脚手架：npm create vite@latest 项目名称
  
• 安装electron的相关依赖：注：安装时终端url要项目名那一层
  
• 安装npm install electron -D
  
• 安装打包工具：npm install electron-builder -D
  
• 开发工具：npm install electron-devtools-installer -D
  
• 配置文件：npm install vite-plugin-electron -D，npm install vite-plugin-electron-renderer -D
  
• 在项目的根目次下新建electron-main文件夹，之后新建index.ts，配置如下：
  
  1. import { app, BrowserWindow } from "electron";
  2. import * as path from "path";
  4. // 本地启动的vue项目路径
  5. const vueProjectAddress = "http://localhost:5173"
  6. /**
  7. * 创建一个新的窗口
  8. */
  9. const createWindow = () =>{
  10.   const win = new BrowserWindow({
  11.     webPreferences: {
  12.       contextIsolation: false, // 是否开启隔离上下文
  13.       nodeIntegration: true, // 渲染进程使用Node API
  14.     },
  15.   });
  16.   if (app.isPackaged) {
  17.     win.loadFile(path.join(__dirname, "../index.html"));
  18.   } else {
  19.     win.loadURL(vueProjectAddress);
  20.   }
  21. };
  22. // 打开窗口
  23. app.whenReady().then(() => {
  24.   createWindow(); // 创建窗口
  25.   app.on("activate", () => {
  26.     if (BrowserWindow.getAllWindows().length === 0) createWindow();
  27.   });
  28. });
  29. // 关闭窗口
  30. app.on("window-all-closed", () => {
  31.   if (process.platform !== "darwin") {
  32.     app.quit();
  33.   }
  34. });

  复制代码
  
  
• 在tsconfig.app.json中的include增加配置"electron-main/**/*.ts" 
  1. "include": [
  2. "src/**/*.ts",
  3. "src/**/*.tsx",
  4. "src/**/*.vue",
  5. "electron-main/**/*.ts"
  6. ]

  复制代码
  
  
• 在vite.config.ts配置
  1. import electron from "vite-plugin-electron";
  2. import electronRenderer from "vite-plugin-electron-renderer";
  3. export default defineConfig({
  4.   plugins: [
  5.     vue(),
  6.     electron({
  7.       entry: "electron-main/index.ts", // 主进程文件
  8.     }),
  9.     electronRenderer(),
  10.   ],
  11.   build: {
  12.     emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
  13.   },
  14. })

  复制代码
  
  
• 打开package.json，增加以下配置：
  1. {
  2.   "name": "my-vue-app",
  3.   "private": true,
  4.   "version": "0.0.0",
  5.   "main": "dist-electron/index.js", // 新增
  6.   "scripts": {
  7.     "dev": "vite",
  8.     "build": "vue-tsc && rimraf dist && vite build && electron-builder",
  9.     "preview": "vite preview"
  10.   },
  11.   // build 新增
  12.   "build": {
  13.     "appId": "com.smallpig.desktop",
  14.     "productName": "smallpig",
  15.     "asar": true,
  16.     "copyright": "Copyright © 2022 smallpig",
  17.     "directories": {
  18.       "output": "release/${version}"
  19.     },
  20.     "files": [
  21.       "dist"
  22.     ],
  23.     "mac": {
  24.       "artifactName": "${productName}_${version}.${ext}",
  25.       "target": [
  26.         "dmg"
  27.       ]
  28.     },
  29.     "win": {
  30.       "target": [
  31.         {
  32.           "target": "nsis",
  33.           "arch": [
  34.             "x64"
  35.           ]
  36.         }
  37.       ],
  38.       "artifactName": "${productName}_${version}.${ext}"
  39.     },
  40.     "nsis": {
  41.       "oneClick": false,
  42.       "perMachine": false,
  43.       "allowToChangeInstallationDirectory": true,
  44.       "deleteAppDataOnUninstall": false
  45.     },
  46.     // 新增
  47.     "publish": [
  48.       {
  49.         "provider": "generic",
  50.         "url": "http://127.0.0.1:8080"
  51.       }
  52.     ],
  53.     "releaseInfo": {
  54.       "releaseNotes": "版本更新的具体内容"
  55.     }
  56.   },
  57.   "dependencies": {
  58.     "electron-devtools-installer": "^3.2.0",
  59.     "vue": "^3.2.45"
  60.   },
  61.   "devDependencies": {
  62.     "@vitejs/plugin-vue": "^4.0.0",
  63.     "electron": "^22.0.2",
  64.     "electron-builder": "^23.6.0",
  65.     "install": "^0.13.0",
  66.     "npm": "^9.3.0",
  67.     "polyfill-exports": "^0.4.0-beta.2",
  68.     "rimraf": "^4.1.0",
  69.     "typescript": "^4.9.3",
  70.     "vite": "^4.0.0",
  71.     "vite-plugin-electron": "^0.11.1",
  72.     "vite-plugin-electron-renderer": "^0.11.4",
  73.     "vue-tsc": "^1.0.11"
  74.   }
  75. }

  复制代码
  
  
• 在npm run dev即可
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4