用vite+vue3+ts+electron，让你的应用横跨web与桌面端

跨平台应用开发：用 Vite、Vue 3、Electron 打造 Web 和桌面一体化

跨平台开发概述

在当今互联网时代，无论是在工作还是娱乐中，我们都需要面对不同的终端设备和平台，从电脑到手机再到物联网设备。跨平台开发 的概念便应运而生，它可以让我们使用单一代码库针对多个平台开发应用程序，节省时间和资源。

Vite、Vue 3、Electron 组合

现在，我们可以使用 Vite、Vue 3、TypeScript 和 Electron 的组合，轻松构建出可同时在 Web 和 Electron 桌面端运行的应用。这个强大的模板框架让开发者可以在现代化的开发环境中，用最少的工作量，构建出拥有完整功能的跨平台应用程序，包括了用户界面、数据管理、事件处理、网络请求等等，让你可以专注于业务逻辑，而不用担心底层的技术细节。

构建 Web 和 Electron 跨平台应用的步骤

步骤一：使用 Vite 构建 Vue + TypeScript 基本模板

npm install -g vite
vite create my-app
cd my-app
npm install vue @vitejs/plugin-vue typescript @vitejs/plugin-typescript

步骤二：安装 Electron 和 Vite-Plugin-Electron 插件

npm install -g electron
npm install vite-plugin-electron

步骤三：在 Vite 配置文件中使用 Vite-Plugin-Electron

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

export default defineConfig({
  plugins: [
    vue(),
    typescript(),
    electron({
      main: {
        entry: 'src/main.ts',
        vite: {
          build: {
            rollupOptions: {
              external: ['electron', 'vue'],
            },
          },
        },
      },
      renderer: {
        entry: 'src/renderer/main.ts',
        vite: {
          build: {
            rollupOptions: {
              external: ['electron', 'vue'],
            },
          },
        },
      },
    }),
  ],
})

步骤四：运行 Electron 开发服务器

npm run electron:dev

在浏览器中访问 http://localhost:3000，你将看到 Vue 应用运行在浏览器中。在 Electron 应用中，你将看到 Vue 应用运行在 Electron 窗口中。

常见问题解答

1. 为什么需要跨平台开发？
跨平台开发可以让我们使用单一代码库针对多个平台开发应用程序，节省时间和资源，同时确保应用程序在不同平台上的一致性。

2. Vite、Vue 3、Electron 组合的优势是什么？
Vite 是一个快速且现代化的构建工具，Vue 3 是一个流行且功能强大的前端框架，而 Electron 允许我们构建跨平台桌面应用程序。将它们结合起来，我们可以轻松创建功能丰富的跨平台应用。

3. Vite-Plugin-Electron 是什么？
Vite-Plugin-Electron 是一个 Vite 插件，它允许我们轻松地将 Electron 集成到我们的 Vite 项目中，从而可以构建跨平台 Web 和桌面应用程序。

4. 如何在 Electron 中打包 Node.js 模块？
在 Vite 配置文件中，我们可以使用 rollupOptions.external 选项将 Node.js 模块标记为外部依赖项，这样它们就不会被打包到 Electron 应用程序中。

5. 如何在 Electron 中访问 Vue 实例？
在 Electron 主进程中，我们可以使用 BrowserWindow.webContents.executeJavaScript 方法在渲染器进程中访问 Vue 实例。