Vue+Vite+Electron项目构建

2024年09月06日 616 字大概 3 分钟

这部分介绍如何使用 Vite 创建一个 Vue + Electron 项目。

使用Vite创建项目：

1	`create vite`

安装electron：

1	`npm install --save-dev electron`

这里建议用国内源cnpm

然后在package.json配置启动命令：

{
  "scripts": {
    "start": "electron ."
  }
}

然后在项目根目录下创建main.js和preloader.js，修改package.json中"main"属性为main.js的位置，然后运行npm run start，就可以启动 electron 了。

接下来我们先运行npm run build构建 dist 目录：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base:  "./",
  plugins: [vue()],
})

这里我们可以把start命令改为"start": "npm run build && electron ."。

main.js内容直接从官网拿下来就可以了，修改loadFile路径为'dist/index.html'：

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  createWindow()

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

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

在第一行中，我们使用 CommonJS 语法导入了两个 Electron 模块，因此我们需要将后缀改为.cjs，否则会报错。运行：

createWindow() 函数将页面加载到新的BrowserWindow实例中。在 Electron 中，只有在 app 模块的 ready 事件触发后才能创建BrowserWindows实例。我们您可以通过使用 app.whenReady() API 来监听此事件，并在其成功后调用 createWindow() 方法。

接下来我们来看看preload.js。该文件用于预加载脚本来增强渲染器，通过全局变量将 Electron 的process 对象暴露给渲染器。为了将脚本附在渲染进程上，在 BrowserWindow 构造器中使用 webPreferences.preload 传入脚本的路径。

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  ping: () => ipcRenderer.invoke('ping')
  // 除函数之外，我们也可以暴露变量
})

// main.cjs
const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  })

  win.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  createWindow()

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

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