![758956c0a32da1578f0341e1e1981103.jpeg](https://developer.qcloudimg.com/http-save/yehe-12305456/c21ac4d1d9ad18ea5357bcba73bede00.jpg)
如今，越来越多的桌面应用开始采用 Web 化界面设计。这种方法完美结合了 Web 技术的灵活性与原生应用的性能优势及系统集成能力，成为桌面开发的主流趋势。

本文介绍的 Java 桌面应用正是基于这一现代架构：通过 Vue.js 与 Tailwind CSS 构建 Web 界面，实现了跨平台一致、流畅响应且设计精美的用户体验。

## Web UI 对比原生 UI

传统桌面应用的原生 UI 工具包长期难以满足现代 UI 需求——要实现精致的视觉效果、流畅的动画过渡、高 DPI 屏幕适配，或是像 Web 应用那样灵活切换主题（亮色 / 暗色模式、自定义配色等），往往需要大量定制开发工作。

另一方面，基于 Web 的用户界面受益于庞大的生态系统，其中包含现成的库、组件框架、响应式设计，以及跨操作系统和设备形态的一致性。

通过在桌面外壳中嵌入 Web UI，我们既能使用现代 Web 风格的界面，又能利用原生应用的能力。纯 Web 应用由于缺乏完全的文件系统访问、OS API 和离线能力，很难完全替代桌面应用；而在原生包装中运行 Web UI 则弥补了这些不足，实现两者的最佳组合。

## 应用概览

该应用是一款跨平台 Java 桌面应用程序，核心架构是在原生 Java 窗口中集成现代化 Vue.js Web 界面，通过 Shadcn 组件库构建简洁直观的操作界面。

这种架构确保了以下特性：

- 在 Windows、macOS、Linux 以及麒麟（Kylin）等信创操作系统上统一的界面呈现。
- 丝滑的交互体验，接近 Web 应用的流畅度。
- 通过打包所有资源实现离线运行，启动即可使用，无需网络连接。

应用启动后会显示主控制面板以及偏好设置窗口，用户可以调整界面主题、字体大小、布局等选项。所有设置都保存在本地文件系统，并在下次启动时自动恢复。
![4bdc5663027bb9f84d2f5ed64a06e04b.png](https://developer.qcloudimg.com/http-save/yehe-12305456/0054263c7ee273ad37e3da2e6125d395.png)

## 应用窗口与 Web 视图

应用主窗口基于 Java Swing 的 `JFrame` 实现，作为 Java 内置组件，它具备轻量易用的特点。窗口内部嵌入了 Fuzio 提供的 Chromium 内核 Web 视图组件，能够直接在桌面窗口中渲染 Vue.js 界面，并支持所有现代浏览器特性。

```java
var engine = Engine.newInstance(HARDWARE_ACCELERATED);
var browser = engine.newBrowser();

SwingUtilities.invokeLater(() -> {
    var view = BrowserView.newInstance(browser);
    var frame = new JFrame("Application");
    frame.addWindowListener(new WindowAdapter() {
        @Override
        public void windowClosing(WindowEvent e) {
            engine.close();
        }
    });
    frame.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
    frame.add(view, BorderLayout.CENTER);
    frame.setSize(1280, 900);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
});
```

这套架构分工明确：Java 后端负责核心业务逻辑（数据读写、文件操作等），Vue.js 前端专注于界面布局与用户交互，各司其职且高效协同。

## 桌面应用中加载 Web UI

Vue.js 部分本质上是一个标准 Web 项目，根据环境的不同，应用会从本地开发服务器或嵌入式静态文件加载它。

### 开发环境

开发环境的 Web 应用加载流程极为简洁：启动本地开发服务器后，直接访问 localhost 地址即可：

```shell
./gradlew desktop-web-app:startDevServer -Pfrontend=vue
```

```java
if (!AppDetails.isProduction()) {
    browser.navigation().loadUrl("http://localhost");
} else {
    ...
}
```

应用启动后，嵌入式 Web 视图会导航至本地开发服务器地址。此时修改 Vue 组件或样式，无需重新构建 Java 部分即可实时生效。

### 生产环境

在生产环境中，桌面应用需要完全离线运行。依赖本地 Web 服务器不仅增加复杂度，也带来潜在安全风险。

从本地或远程服务器提供用户界面会增加额外的安全风险：用户可能会在浏览器中加载 Web 应用程序 URL 并检查应用程序的源代码，从而暴露敏感逻辑。我们当然不希望这种情况发生，我们希望用户界面只能在桌面应用程序内部访问，并且其源代码隐藏在应用程序内部。

为实现这一目标，我们将 Web 应用文件打包至 Java 资源目录，通过 Fuzio 的自定义协议拦截 API 从类路径中直接加载资源。

首先配置自定义协议与请求拦截器，用于处理 Web 资源请求：

```java
var options = EngineOptions.newBuilder(HARDWARE_ACCELERATED)
        .addScheme(Scheme.of("fuzio"), new UrlRequestInterceptor());
var engine = Engine.newInstance(options.build());
```

Vue.js 应用被直接打包到 Java 资源中，通过 Fuzio 加载，使 UI 部分完全独立封装：

- 所有 HTML、CSS、JavaScript 文件均从应用 JAR 包中读取
- 无需依赖任何外部服务器
- 源代码不会被浏览器开发者工具审查

这种方案确保了应用的高性能、安全性与可移植性，在 Windows、macOS、Linux 以及信创环境中均能稳定运行。

## Vue.js 与 Java 之间的通信

为了实现应用程序逻辑，Vue.js 前端需要与 Java 后端通信——例如，读取或更新存储在磁盘上的偏好设置。

### Fuzio JavaScript - Java 桥接器

Fuzio 内置了 JavaScript 与 Java 的直接通信桥，允许 Web UI 直接调用 Java 方法。Vue.js 前端可通过该桥调用后端接口（如"保存主题设置"），Java 后端也能主动向前端发送事件或数据更新。

以下是如何在 Fuzio 中声明 JavaScript 和 Java 之间通信的类型：

```java
@JsAccessible
class PrefsService {
    void setFontSize(int size) {

    }
}
```

```ts
declare class PrefsService {
    setFontSize(size: number): void;
}

declare const prefsService: PrefsService;
...
prefsService.setFontSize(12);
```

### Protobuf + gRPC

对于简单交互，应用仍可使用现有 REST 接口；而针对更复杂、需要可扩展性的功能，我们引入了 Protocol Buffers（Protobuf）与 gRPC，构建了更快速、类型安全的通信层。

通过 Protobuf 统一定义数据结构与服务 API，可自动为前后端生成强类型客户端 / 服务器代码。只需在 `.proto` 文件中定义消息格式与服务接口，Protobuf 便会自动生成 Java 与 TypeScript 代码。

```proto
service PrefsService {
  rpc SetFontSize(FontSize) returns (google.protobuf.Empty);
}

enum FontSize {
  SMALL = 0;
  DEFAULT = 1;
  LARGE = 2;
}
```

gRPC 作为传输层：Java 后端运行轻量级 gRPC 服务器，Vue.js 应用以客户端身份与之通信，实现结构化数据的安全高效传输。

该方案带来了三大优势：

- 在应用前后端之间实现类型安全。
- 在构建阶段获得自动补全与错误检查能力。
- 当功能或 API 增加时，系统能够更容易扩展。

![Generated_image.png](https://developer.qcloudimg.com/http-save/yehe-12305456/f22176b7c97592579aa1e44a1b5cf754.png)

## 总结

采用 Web UI 构建桌面应用已被证明是一种强大的现代开发模式。它既保留了 Web 技术的易用性与生态优势，又具备原生桌面应用的系统集成能力与性能表现。

本文实现的 Java 桌面应用，通过 Vue.js 构建前端界面、Tailwind CSS 处理样式，核心达成了以下目标：

- 将 Chromium 内核 Web 视图嵌入 Java 窗口。
- 实现开发 / 生产环境下的 Vue 资源无缝加载。
- 使用 gRPC 和 Protobuf 实现 Web UI 与 Java 后端之间的通信。

这种混合架构结合了 Java 和 Vue.js 前端，允许开发者在桌面环境中使用标准的 Web 工具，并使应用程序能够作为独立的软件包运行。

如今，越来越多的桌面应用开始采用 Web 化界面设计。这种方法完美结合了 Web 技术的灵活性与原生应用的性能优势及系统集成能力，成为桌面开发的主流趋势。

使用 Vue.js 构建 Java 桌面应用

本文介绍如何使用 Vue.js、Tailwind CSS 与 Fuzio 构建跨平台 Java 桌面应用，涵盖 Chromium Web UI 嵌入、离线资源加载、JavaScript 与 Java 通信，以及基于 gRPC 和 Protobuf 的类型安全交互。

本文介绍一种Java桌面应用架构，采用Vue.js与TailwindCSS构建Web界面，嵌入Chromium内核于Java窗口，实现跨平台一致体验。通过Fuzio桥接器与gRPC+Protobuf实现前后端通信，支持离线运行及源码保护，兼顾Web生态与原生性能。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

使用 Vue.js 构建 Java 桌面应用-腾讯云开发者社区-腾讯云

使用 Vue.js 构建 Java 桌面应用

使用 Vue.js 构建 Java 桌面应用

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐