vue3 electron

作者：风外听竹发布日期:2025-04-21 浏览:43

// main.js (Electron 主进程文件)
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      enableRemoteModule: false,
    },
  });

  // 加载 Vue 应用的 index.html 文件
  mainWindow.loadURL(
    process.env.VUE_APP_URL || 'http://localhost:8080'
  );
}

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 (预加载脚本)
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('api', {
  doSomething: () => {
    console.log('Doing something...');
  },
});

// src/main.js (Vue 3 应用入口文件)
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// public/index.html (Vue 应用的 HTML 文件)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 + Electron</title>
</head>
<body>
  <div id="app"></div>
  <script src="/js/app.js"></script>
</body>
</html>

// src/App.vue (Vue 3 组件文件)
<template>
  <div id="app">
    <h1>Hello from Vue 3 and Electron!</h1>
    <button @click="callApi">Call API</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    callApi() {
      window.api.doSomething();
    },
  },
};
</script>

解释说明

main.js:
- 这是 Electron 的主进程文件，负责创建和管理浏览器窗口。
- createWindow 函数用于创建一个新的浏览器窗口，并加载 Vue 应用的 index.html 文件。
- app.whenReady() 确保在应用程序准备好时调用 createWindow。
- app.on('window-all-closed') 处理所有窗口关闭时的行为。
preload.js:
- 预加载脚本允许你在渲染进程中安全地暴露一些 API。
- 使用 contextBridge 暴露一个简单的 API (doSomething) 到前端代码中。
src/main.js:
- 这是 Vue 3 应用的入口文件，使用 createApp 方法创建并挂载 Vue 实例。
public/index.html:
- 这是 Vue 应用的 HTML 文件，包含一个 div 元素作为 Vue 应用的挂载点。
src/App.vue:
- 这是一个简单的 Vue 组件，包含一个按钮，点击按钮时调用预加载脚本中暴露的 API。

上一篇：vue 阻止事件冒泡

下一篇：vue获取元素的高度