Vite+Electron快速构建VUE3桌面应用的实现

下面我将为你详细讲解 "Vite + Electron 快速构建 Vue3 桌面应用的实现"。

简介

Vite 是一个基于 JavaScript 的构建工具，旨在提供一种快速开发的体验。它专注于提供简单的配置、快速的热更新功能以及媲美于 Webpack 的构建功能，对于快速实现前端开发者的需求非常有帮助。

Electron 是一个基于 Node.js 和 Chromium 的桌面应用框架，它可以将 Web 技术应用到桌面应用程序开发中，提供了和原生应用相媲美的用户体验，也极大地方便了前端开发人员的开发和部署。

Vue3 是一个支持更好的 TypeScript 和 Composition API 的新版本 Vue，拥有更方便的开发体验，以及更快的渲染速度。

在实际的前端开发中，我们通常会使用Vue框架开发Web应用程序，但是在很多情况下，我们需要将Web应用部署到桌面环境中，这就需要使用到桌面应用框架Electron，同时使用 Vite 可以更好的提升前端开发效率。

下面就详细讲解如何使用 Vite+Electron 快速构建 Vue3 桌面应用。

步骤

1. 创建 Vue3 项目

首先我们需要创建一个基于 Vue3 的项目，我们可以直接使用 Vue 官方的脚手架来创建：

npm init @vitejs/app my-electron-vue3-app --template vue-ts

2. 安装 Electron

接下来我们需要安装 Electron，使用以下命令：

npm install --save-dev electron

3. 配置 Vite

我们需要在项目的根目录下创建一个 vite.config.ts 配置文件，并进行以下配置：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  build: {
    outDir: 'dist/renderer', // 打包后的文件存储目录
    emptyOutDir: true,
    assetsDir: '.', // Vite 处理的静态资源目录， '.' 表示根目录
  },
})

4. 配置 Electron

在项目的根目录下创建一个名为 main.ts 的文件，这是我们创建 Electron 应用程序的入口文件，进行以下配置：

import { app, BrowserWindow } from 'electron'
import path from 'path'

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

  if (process.env.NODE_ENV === 'development') {
    win.loadURL(`http://localhost:3000`)
    win.webContents.openDevTools()
  } else {
    win.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}

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

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

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

在 index.html 中加载静态资源时，需要指定 base，并且在 router/index.ts 中也需要进行相应的配置：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes,
})

export default router

5. 编写运行命令

在 package.json 中进行以下配置：

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

6. 构建和打包

使用以下命令进行构建：

npm run build

构建完成后会生成一个 dist/renderer 目录，在 dist 下再创建一个 main.js 文件，内容为：

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

let mainWindow

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

    mainWindow.loadFile('index.html')

    mainWindow.on('closed', function () {
      mainWindow = null
    })
  }

  app.on('ready', createWindow)

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

  app.on('activate', function () {
    if (mainWindow === null) createWindow()
  })
}

initialize()

然后使用以下命令打包：

electron-builder build --mac --win

这样我们就实现了使用 Vite+Electron 快速构建 Vue3 桌面应用的过程了。

示例说明

示例1：在 Electron 项目中引入 Bootstrap

在 index.html 中加入以下代码：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.0-beta1/css/bootstrap.min.css" integrity="sha384-UPlrc8yavQRYiG9j5SC0E/W5BvAugJJ6Xx/ntIWNjx5LOifNidY02YdLtapMMUtL" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js" integrity="sha384-D5wV+zsnSozV/UuMf0zGGm7uSEOIccN7z5kXwbrHS/4Kv3UMkpejUWEM1o/Qxz6X" crossorigin="anonymous"></script>

这样我们就成功为 Electron 项目引入了 Bootstrap。

示例2：使用 Redis 做数据存储

首先我们需要安装 redis：

npm install redis

然后创建一个叫 utils/redis.ts 的文件，在该文件中实现 Redis 的数据存储功能。

import redis from 'redis'

function set(key: string, value: string) {
  const client = createClient()
  client.set(key, value, redis.print)
}

function get(key: string, callback: Function) {
  const client = createClient()
  client.get(key, callback)
}

function createClient() {
  return redis.createClient(
    process.env.REDIS_PORT,
    process.env.REDIS_HOST,
    {
      auth_pass: process.env.REDIS_PASSWORD,
    },
  )
}

export default {
  set,
  get,
}

这样我们就可以使用 Redis 来做数据存储了。

以上就是使用 Vite+Electron 快速构建 Vue3 桌面应用的完整攻略，如果有不懂的地方可以留言哦。