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

本文链接：https://blog.csdn.net/weixin_45485922/article/details/144219727

项目介绍

前端基于 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: