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

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啦

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

相关推荐
该用户已不存在5 小时前
Windows 开发环境这么难配,为什么还有那么多人在用?
前端·windows·后端
gnip5 小时前
深度封装tree公共组件
前端·javascript·vue.js
mon_star°5 小时前
《浪浪山小妖怪》知识竞赛来袭!测测你是几级影迷?
前端·css·html
Jolyne_5 小时前
H5的Form表单项不够灵活怎么办?来看看这篇通用组件封装思路分享
前端
Ares-Wang5 小时前
JavaScript》》JS》》ES6》》 foreach 、for in 、for of
前端·javascript·es6
coding随想5 小时前
浏览器如何检测用户环境光变化:揭秘Ambient Light Events(环境光事件)
前端
ZSQA5 小时前
Hbuilder X cli项目使用本地的node执行编译。
前端
龙在天5 小时前
介绍一个🔥火热的React 应用状态管理库
前端
字节逆旅5 小时前
CodeBuddy+Figma+MCP,我指挥AI写代码,老板夸我鱼摸得好
前端·人工智能·mcp