使用 vue+electron+vite 搭建一个属于自己的桌面端应用

快乐是Happy2025-09-03 16:19

web->electron，简单记录一下搭建项目时遇到的一些问题和搭建步骤

创建项目

pnpm create vite@latest vue-electron-test

安装electron以及相关插件
ts 复制代码 
 //安装electron
 pnpm install electron -D
 
 //安装打包和exe程序
 pnpm install electron-builder -D
 
 //安装electron调试插件
 pnpm install electron-devtools-installer -D 
 
 //安装使用vite构建electron应用程序插件
 pnpm install vite-plugin-electron
 
 
 //electron-builder：备注安装最新版本的依赖可能会导致版本不兼容引起报错
 package.json
 
    "devDependencies": {
        "@vitejs/plugin-vue": "^6.0.1",
        "@vue/tsconfig": "^0.7.0",
        "autoprefixer": "^10.4.21",
        "electron": "^37.3.1",
        "electron-builder": "^24.13.3",
        "electron-devtools-installer": "^3.2.0",
        "postcss": "^8.5.6",
        "tailwindcss": "3.4.17",
        "typescript": "~5.8.3",
        "vite": "^7.1.2",
        "vite-plugin-electron": "^0.28.4",
        "vue-tsc": "^3.0.5"
     }
创建项目入口---main.js(主进程文件)

在项目根目录下创建一个electron文件夹用于存放electron相关的文件（main.js/preload.js）

可以在主进程文件BrowserWindow函数中配置窗口大小width/height，logo , title

更多配置参考官方文档： www.electronjs.org/zh/docs/lat...

js 复制代码 
//main.js

const { app, BrowserWindow } = require('electron')
const { join } = require('path')

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
    const win = new BrowserWindow({
        width: 1280,
        height: 800,
        minWidth : 300,
        minHeight : 180,
        icon: join(__dirname, '../public/logo.ico'),
        frame: true, //是否展示顶部菜单
        webPreferences: {
            preload: join(__dirname, 'preload.js')
        }
    })
    // 隐藏顶部菜单
    win.setMenu(null);

    // win.loadURL('http://localhost:3000')
    // development模式
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        // win.webContents.openDevTools()
    } else {
        win.loadFile(join(__dirname, '../dist/index.html'))
        // win.webContents.openDevTools()
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})
创建preload.js(通信文件 进程-->preload.js-->主进程)

``Preload.js 文件是一个**特殊的、运行在渲染进程上下文中的 JavaScript 脚本**，它的核心作用是**在渲染进程和主进程之间建立一个安全、可控的通信桥梁**，同时**隔离渲染进程对 Node.js 和 Electron API 的直接访问**，以增强应用的安全性。

js 复制代码 
//preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
配置vite插件
ts 复制代码 
//vite.config.ts

import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
import electron from "vite-plugin-electron";

// https://vite.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    electron({
      // 主进程入口文件
      entry: "./electron/main.js",
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "~": fileURLToPath(new URL("./", import.meta.url)),
    },
  },
  server: {
    // 端口
    port: 3000,
  },
});
配置package.json文件

删除"type": "module" ，因为Node.js 和 Electron 的主进程使用传统的 CommonJS 模块，而不是现代的 ES Modules (ESM) 系统。 如果不删除，Electron 的主进程会因为无法理解require()` 语法而直接崩溃。这里当然也可以使用es module格式,不过mian.js及electron中使用的一些文件需要手动修改为import格式导入

配置主进程文件路径 ："main": "./electron/main.js"

配置打包以及修改icon

json 复制代码 
//package.json
{
  "name": "web-electron-test",
  "private": true,
  "version": "0.1.0",
  "main": "./electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "electron:build": "vite build && electron-builder",
    "preview": "vite preview"
  },
  "build": {
    "productName": "BaMaster",
    "appId": "aps.bamaster",
    "copyright": "aps.bamaster © 2025",
    "compression": "maximum",
    "asar": true,
    "directories": {
      "output": "release/"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "perMachine": true,
      "deleteAppDataOnUninstall": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "BaMaster"
    },
    "win": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "mac": {
      "icon": "./public/vite.svg",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    },
    "linux": {
      "icon": "./public/vite.svg",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    }
  },
  "dependencies": {
    "scss": "^0.2.4",
    "vue": "^3.5.18",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/tsconfig": "^0.7.0",
    "autoprefixer": "^10.4.21",
    "electron": "^37.3.1",
    "electron-builder": "^24.13.3",
    "electron-devtools-installer": "^3.2.0",
    "postcss": "^8.5.6",
    "tailwindcss": "3.4.17",
    "typescript": "~5.8.3",
    "vite": "^7.1.2",
    "vite-plugin-electron": "^0.28.4",
    "vue-tsc": "^3.0.5"
  }
}
配置第三方依赖TainWindcss或其他的一些依赖包，和平常写vue一样

npm install -D tailwindcss@3.4.17 postcss autoprefixer

npx tailwindcss init -p 使用该命令会生成两个文件，若未生成可在根目录下自行创建

js 复制代码 
//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建tailwind.css文件并引入main.ts（vue）文件

css 复制代码 
@tailwind base;
@tailwind components;
@tailwind utilities;
运行项目

pnpm dev

打包项目

electron:build

由于package.json文件中已配置好，在执行命令完之后会在根目录下生成一个名为release文件夹，里面会生成一些各版本的安装包

总结一下搭建项目中遇到的报错
  1. 更新electron-builder版本，再次运行打包命令时会报错

意思是让删除resources\app.asar这个文件，这时你会发现该文件被占用删不掉，简单粗暴关机重启重新运行打包命令再次打包就没问题了

  1. 打包时可能会遇到以下错误

这时你只需要访问url后面的链接，下载版本对应的winCodeSign-2.6.0压缩包文件，手动放在C:\Users\DELL\AppData\Local\electron-builder\Cache\winCodeSign文件下就可以了

  1. icon换了不生效问题并且报错
  • 检查在electron/main.js中是否配置icon
js 复制代码 
const createWindow = () => {
    const win = new BrowserWindow({
        width: 1280,
        height: 800,
        icon: join(__dirname, '../public/logo.ico'),
        frame: true, //是否展示顶部菜单
        webPreferences: {
            preload: join(__dirname, 'preload.js')
        }
    })

    // win.loadURL('http://localhost:3000')
    // development模式
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    } else {
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}
  • 若还报错看控制台报错信息，让提供一张250*250像素的ico 格式的图片，换了之后就成功啦

  1. 安装路由时无报错，运行项目发现时空白页面

    将createMemoryHistory模式修改为createWebHashHistory模式就Ok啦

目前就发现这么多坑，先探探路，后续正式写项目时，再更新吧

相关推荐
前端小书生1 天前
React Router
前端·react.js
_大学牲1 天前
Flutter Liquid Glass 🪟魔法指南：让你的界面闪耀光彩
前端·开源
Miss Stone1 天前
css练习
前端·javascript·css
Nicholas681 天前
flutter视频播放器video_player_avfoundation之FVPVideoPlayer(二)
前端
文心快码BaiduComate1 天前
一人即团队，SubAgent引爆开发者新范式
前端·后端·程序员
掘金一周1 天前
2025年还有前端不会Nodejs ？| 掘金一周 9.25
android·前端·后端
Sailing1 天前
前端拖拽，看似简单，其实处处是坑
前端·javascript·面试
RoyLin1 天前
流
前端·后端·node.js
RoyLin1 天前
C++ 基础与核心概念
前端·后端·node.js
记得坚持1 天前
vue2插槽
前端·vue.js
热门推荐
01Multisim使用教程详尽版--(2025最新版)02UV 工具安装与国内镜像源配置指南03GitHub 镜像站点04Spec-Kit 使用指南0546个Nano-banana 精选提示词，持续更新中06UV安装并设置国内源07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）082025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）09VsCode远程Copilot无法使用Claude Agent问题10Linux下V2Ray安装配置指南