在 Vue 3 技术栈逐渐成为主流的今天，不少团队仍须维护运行在 Oracle GlassFish 上的 Java EE 旧系统。将 GlassFish 纳入前端工程化体系，并不是要把应用服务器搬进浏览器，而是借助 Vue 3 的构建工具与开发服务器，统一管控界面、接口代理和状态可视化。GlassFish 自 4.0 起内置了基于 Jersey 的 REST 管理端点，默认监听 4848 端口，这与 Vue 3 使用的 Vite 开发服务器形成天然的互补结构。
利用 Vite 代理打通 GlassFish 管理接口
Vue 3 官方推荐的构建工具 Vite 提供了 server.proxy 配置，可以把前端发起的 /glassfish 请求透明转发到本地或远程的 GlassFish 管理端口。这样做的好处是规避浏览器跨域限制，同时让前端代码以相对路径调用接口，便于在多环境间切换。在开发阶段，我们完全不需要在 GlassFish 上额外开启 CORS，也能在 Vue 组件里获取服务器实例信息。
具体配置时，需要在 vite.config.js 中声明代理目标与路径重写。下面的示例把 /api/gf 映射到 http://localhost:4848/management/domain，并去掉前缀。注意 GlassFish 的 REST 接口返回的是 JSON 格式，但部分老版本会在响应头里携带 text/plain，此时要在 axios 实例中强制设置响应解析方式，否则 Vue 层拿到的会是字符串而非对象。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api/gf': {
target: 'http://localhost:4848/management/domain',
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/gf/, ''),
headers: {
'Accept': 'application/json'
}
}
}
}
})
这种代理方案相比直接让前端访问 4848 端口，优势在于统一了入口与鉴权。如果 GlassFish 开启了安全认证，可以把用户名密码放在 Vite 的环境变量文件里，通过代理的 configure 钩子自动注入 Authorization 头，而源码中不会泄露凭证。缺点是仅限开发期使用，生产环境需依靠反向代理服务器承接。
封装 npm 脚本实现 GlassFish 生命周期工程化
传统运维人员习惯用 asadmin 命令行启动、停止域，但在 Vue 3 项目里，我们可以把这类操作写进 package.json 的 scripts 中，使前端开发者用 npm run gf:start 就能拉起本地 GlassFish。这样降低了协作门槛，也让 CI 流水线能用同一套指令完成前后端联调环境的准备。
实现思路是借助 cross-env 设置 JAVA_HOME 与 GLASSFISH_HOME，再调用 asadmin 子命令。下面是一段 Windows 与 Linux 通用的脚本片段，其中路径分隔符使用了反斜杠与正斜杠混合写法以兼容系统，注意反斜杠必须保留。通过 pre 与 post 钩子，还能在启动前自动部署 Vue 构建产物到 GlassFish 的 docroot 目录。
{
"scripts": {
"gf:env": "cross-env GLASSFISH_HOME=C:\glassfish5 JAVA_HOME=C:\Java\jdk1.8.0_201",
"gf:start": "npm run gf:env && asadmin start-domain domain1",
"gf:stop": "npm run gf:env && asadmin stop-domain domain1",
"gf:deploy": "npm run build && npm run gf:env && asadmin deploy --force dist/app.war"
}
}
这种工程化封装的代价是项目对外部 JDK 与 GlassFish 版本产生耦合，因此建议在根目录放置 .nvmrc 与 gf-version 说明文件。对比单纯使用 Shell 脚本，npm scripts 能利用 Node 生态的变量替换与跨平台包，减少团队成员因操作系统差异导致的部署失败。实践中我们还应把 asadmin 输出通过 tee 命令导入日志，方便 Vue 端的错误页抓取关键字。
在 Vue 3 组件中可视化监控 Java EE 运行状态
GlassFish 的 REST 管理树包含 server、jvm、thread-pools 等节点，Vue 3 的组合式 API 非常适合定时拉取这些数据并渲染成图表。我们可以用 ref 与 onMounted 建立轮询，用 axios 访问前面配置的 /api/gf/servers/server/monitoring-service 端点，取出 JVM 内存与活动线程数。
下方组件演示了如何把 GlassFish 的监控数据变成响应式对象。为避免频繁请求拖垮应用服务器，代码中设置了 5 秒间隔与请求取消逻辑。当组件卸载时，通过 AbortController 中断进行中的连接，这符合 Vue 3 对资源清理的要求，也减轻 GlassFish 的 HTTP 线程压力。
<template>
<div>
<h3>GlassFish 监控</h3>
<p>堆内存: {{ memUsed }} MB</p>
<p>活动线程: {{ threadCount }}</p>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
const memUsed = ref(0)
const threadCount = ref(0)
let timer = null
const controller = new AbortController()
onMounted(() => {
const load = async () => {
const res = await axios.get('/api/gf/servers/server/monitoring-service', {
signal: controller.signal
})
memUsed.value = res.data.extraProperties.entity.jvm.usedHeapSize / 1048576
threadCount.value = res.data.extraProperties.entity.thread-pools.totalcount
}
load()
timer = setInterval(load, 5000)
})
onUnmounted(() => {
clearInterval(timer)
controller.abort()
})
</script>
从架构角度看，让 Vue 3 直接消费 GlassFish 监控接口属于轻量级方案，适合内部运维面板。若面对多实例集群，应在 GlassFish 前增加 Prometheus exporter，由 Vue 通过 Prometheus 查询层获取聚合指标，否则前端要维护大量轮询连接。无论哪种方式，工程化集成的核心都是把 Oracle Java EE 服务器的能力映射到现代前端工作流中，降低上下文切换成本。