手工搭建PC端：pnpm + Vite + Vue3 + Element Plus + Electron

hello-future

134人浏览 · 2026-06-10 07:12:42

hello-future · 2026-06-10 07:12:42 发布

初始化项目

mkdir electron-vue3
cd electron-vue3
pnpm init

安装Vite + Vue3 + Element Plus

pnpm add vue@latest
pnpm add -D vite @vitejs/plugin-vue
pnpm add element-plus
pnpm add @element-plus/icons-vue

安装Electron

pnpm add -D electron electron-builder
pnpm add -D vite-plugin-electron vite-plugin-electron-renderer

创建静态文件入口：index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>electron-vue3</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

创建样式文件：src/assets/style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

创建Vue根组件：src/App.vue

<template>
  <h1>Vue3 + Element Plus</h1>
  <el-button type="primary">测试按钮</el-button>
</template>

创建入口文件：src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/style.css'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

创建Electron主进程文件：electron/main.js

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

let win

function createWindow() {
  win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
    win.webContents.openDevTools()
  } else {
    win.loadFile(path.join(__dirname, '../dist/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

创建Electron渲染进程的预加载脚本文件：electron/preload.js

console.log('preload 已加载')

Vite核心配置文件：vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'

export default defineConfig({
  plugins: [
    vue(),
    electron([
      {
        entry: "electron/main.js"
      },
      {
        entry: "electron/preload.js"
      }
    ]),
    renderer()
  ],
  server: {
    port: 3000
  }
})

创建.npmrc（npm/pnpm/yarn的配置文件）

# Electron国内镜像
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

# PNPM专用配置
node_mirror=https://npmmirror.com/mirrors/node/
registry=https://registry.npmmirror.com/

修改Node.js核心配置文件：package.json

  "main": "electron/main.js",


  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "electron .",
    "electron:dev": "vite",
    "electron:build": "vite build && electron-builder"
  },