基于vite6+ vue3 + electron@33 实现的 局域网内互传文件的桌面软件

目录

• • 项目介绍
  • 项目部分截图
  • 介绍下基础项目搭建
  • • [先搭建一个vite 前端项目 再安装 electron 相关依赖](#先搭建一个vite 前端项目 再安装 electron 相关依赖)
    • 依赖安装失败解决方案
    • [修改 vite配置文件和 ts 配置文件](#修改 vite配置文件和 ts 配置文件)
    • 修改packjson
    • ts相关配置
    • 项目结构介绍

项目介绍

前端 基于 vue3 + ts + windicss

后端 就是node 层

项目地址： https://github.com/duKD/electron-file-transfer

点击跳转

项目部分截图

发送端：

接收端：

介绍下基础项目搭建

先搭建一个vite 前端项目 再安装 electron 相关依赖

# 创建 vite 项目
npm create vite@latest electron-file-transfer  --template vue-ts
# 进入项目目录
cd electron-file-transfer

# 安装基础依赖
npm install

# 安装 electron 相关依赖
npm install electron electron-builder -D
npm install vite-plugin-electron -D
npm install vite-plugin-electron-renderer -D

# 安装 windiCss 记得main.ts 引入 import 'virtual:windi.css'
npm install -D windicss vite-plugin-windicss

# 安装 less 和 svgLoader
npm install -D less vite-svg-loader

依赖安装失败解决方案

项目根目录下创建 .npmrc 文件

输入

registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

修改 vite配置文件和 ts 配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import electron from "vite-plugin-electron";
import renderer from "vite-plugin-electron-renderer";
import { fileURLToPath } from "url";
import { dirname, resolve } from "path";
import WindiCSS from "vite-plugin-windicss";
import svgLoader from "vite-svg-loader";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  plugins: [
    WindiCSS(),
    svgLoader(),
    vue(),
    electron([
      {
       // electron 主进程打包入口
        entry: "electron/main/index.ts",
        vite: {
          build: {
            outDir: "dist-electron/main",
          },
        },
      },
      {
       // electron 预加载文件打包入口
        entry: "electron/preload/index.ts",
        onstart(options) {
          options.reload();
        },
        vite: {
          build: {
            outDir: "dist-electron/preload",
          },
        },
      },
    ]),
    renderer(),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
});

修改packjson

重点关注标红的地方

{
  "name": "electron-file-transfer",
  "private": true,
  "version": "1.0.0",
  "description": "A file transfer application built with Electron",
  "author": {
    "name": "liuqiao",
    "email": "[email protected]"
  },
  "main": "dist-electron/main/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "ele:dev": "vite  && electron .",//开发环境启动
    "build:win": "vite build && electron-builder --win",// win 打包
    "build:mac": "vite build && electron-builder --mac",// mac 打包
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "electron": "^33.2.1",
    "electron-builder": "^25.1.8",
    "less": "^4.2.1",
    "typescript": "~5.6.2",
    "vite": "^6.0.1",
    "vite-plugin-electron": "^0.29.0",
    "vite-plugin-electron-renderer": "^0.14.6",
    "vite-plugin-windicss": "^1.9.4",
    "vite-svg-loader": "^5.1.0",
    "vue-tsc": "^2.1.10",
    "windicss": "^3.5.6"
  },
  "appId": "com.your-app-name.app",
  "productName": "快传",
  "build": {
    "directories": {
      "output": "release/${version}"
    }
  },
  "files": [
    "dist",
    "dist-electron"
  ],
  "mac": {
    "target": [
      "dmg"
    ],
    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
  },
  "win": {
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64"
        ]
      }
    ],
    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
  },
  "nsis": {
    "oneClick": false,
    "perMachine": false,
    "allowToChangeInstallationDirectory": true,
    "deleteAppDataOnUninstall": false
  },
  "linux": {
    "target": [
      "AppImage"
    ],
    "artifactName": "${productName}-Linux-${version}.${ext}"
  }
}

ts相关配置

tsconfig文件

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "typeRoots": ["./node_modules/@types", "./src/types"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "electron/**/*.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node

{
  "compilerOptions": {
    "incremental": true,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "emitDeclarationOnly": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

项目结构介绍

本地开发启动

npm run ele:dev

打包

npm run build:mac 或 npm run build:win