Vue3 + Spring Boot 本地全栈项目怎么发给同事预览？用 cpolar 临时公网访问一次跑通

Vue3 Spring Boot 本地全栈项目怎么发给同事预览用 cpolar 临时公网访问一次跑通很多团队都有同一个痛点前端 Vue3 在本机跑得好好的后端 Spring Boot 也接口正常但一到“发给同事看看”这一步就卡住了。你可以发视频录屏也可以发一堆截图但最有效的方式还是直接给一个能访问的临时地址让同事自己点开看、自己试、自己提问题。这篇文章就按一个真实可执行的流程来做先把 Vue3 和 Spring Boot 在本地跑通再用 cpolar 把本地服务临时映射到公网最后把预览地址发给同事验收。整个过程只开放验证需要的端口不做多余暴露。一、先把本地全栈项目跑起来我们先假设你的项目结构很常见前端是 Vue3后端是 Spring Boot 3前后端分离前端通过接口请求后端。典型目录如下fullstack-demo/ ├── web/ # Vue3 前端 └── server/ # Spring Boot 后端先分别启动前后端。1. 启动 Spring Boot 后端进入后端目录cd server ./mvnw spring-boot:run如果你用的是 Gradlecd server ./gradlew bootRun启动后先确认接口能返回结果。这里准备一个最简单的健康检查接口RestController RequestMapping(/api) public class HelloController { GetMapping(/hello) public MapString, Object hello() { return Map.of( message, Spring Boot is running, time, System.currentTimeMillis() ); } }在浏览器或命令行访问curl http://127.0.0.1:8080/api/hello能看到 JSON 返回就说明后端正常。2. 启动 Vue3 前端进入前端目录cd ../web npm install npm run devVue3 默认会在5173端口启动。打开本地地址http://127.0.0.1:5173前端里准备一个简单页面能调用后端接口template main h1Vue3 Spring Boot Demo/h1 button clickloadMessage调用后端接口/button p{{ message }}/p /main /template script setup import { ref } from vue const message ref(点击按钮加载消息) async function loadMessage() { const response await fetch(/api/hello) const data await response.json() message.value data.message } /script如果你在开发环境里已经配置了代理/api会转发到 Spring Boot。Vite 配置可以写成这样import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://127.0.0.1:8080, changeOrigin: true } } } })这一步很关键前端预览地址要能稳定访问后端接口否则同事打开页面后只看到空白或报错。二、先决定你要公开哪一个入口把本地项目发给同事预览最常见有两种方式只公开前端页面让前端通过代理访问后端前后端都公开前端和后端各给一个临时地址。如果你的项目是标准前后端分离我更推荐第一种只对外暴露前端入口。原因很简单同事打开一个地址就能看页面前端代理把接口请求转给后端不用额外解释两个地址暴露面更小演示更安全。如果后端还有独立接口需要给测试同事直接调用再单独映射 API 端口。三、用 cpolar 把本地前端变成临时公网地址这一步就是解决“本地能跑外面看不到”的关键。cpolar 的作用很直接把你电脑上的本地端口映射成一个外网可访问的临时地址。这样同事不用连你内网也不用你部署到服务器直接打开链接就能看。1. 安装并登录 cpolar先在本机安装 cpolar。安装完成后登录账号并确保客户端可用。安装方式以你当前系统为准装完后先检查状态核心是确认客户端能正常工作。2. 映射 Vue3 前端端口假设 Vue3 跑在5173直接把这个端口映射出去cpolar http 5173如果你已经配置好隧道也可以直接在本地管理界面创建 HTTP 隧道目标地址填127.0.0.1:5173创建后cpolar 会给你一个公网访问地址。这个地址就是你发给同事的预览链接。3. 验证公网地址是否可用打开 cpolar 给你的外网地址检查三件事页面能正常打开页面样式没有丢失点击按钮后能正常请求后端接口。如果页面能开但接口失败问题通常在代理配置或后端只监听了本地地址。这个时候先回到本地检查前端代理再检查 Spring Boot 监听配置。四、让前后端在公网预览里真正联通很多人把前端映射出去以后发现同事能打开页面但接口全挂了。原因很简单你公开的是前端地址前端发出的接口请求还在访问本机的127.0.0.1外部用户当然连不上。这时有两种处理方式。方案一前端代理后端统一从前端入口访问这是最适合临时预览的方案。你让前端开发服务器继续做代理外部同事只访问前端公网地址。前端页面里写的/api/hello由 Vite 代理转到本机的 Spring Boot。这时你要确认两点# 后端本地可访问 curl http://127.0.0.1:8080/api/hello # 前端本地可访问 curl http://127.0.0.1:5173如果这两个本地地址都正常cpolar 再把前端端口映射出去整体链路就通了。方案二前后端分别映射如果你的前端不是开发模式而是打包后的静态资源或者你要让同事直接测接口就把后端端口也映射出去。例如后端端口是8080cpolar http 8080然后前端代码里的接口地址改成公网后端地址或者通过环境变量统一配置。这类方式适合联调但临时分享时复杂度更高。只要不是专门做接口验收我建议优先用前端单入口。五、给同事预览前先做一次验收清单公网地址发出去之前先自己验一次避免同事打开后你还在现场补锅。1. 页面级验收确认这些内容都能看到首页标题正确组件正常渲染路由跳转正常表单或按钮交互可用。2. 接口级验收确认接口返回稳定curl http://127.0.0.1:8080/api/hello页面内再点一次按钮确认前端能拿到后端数据。3. 安全级验收临时预览不等于随便开放。你要做到这几点只暴露演示端口不暴露数据库、Redis、管理后台测试账号使用非真实数据预览结束后立即关闭隧道不把公网地址长期当生产入口。这是临时分享不是部署上线。六、把预览地址发给同事的正确方式当你完成映射后发给同事的信息尽量一次说清楚这是本地预览地址 https://xxxx.cpolar.cn 说明 1. 打开后直接看 Vue3 页面 2. 按钮会请求 Spring Boot 接口 3. 这是临时预览今晚前有效如果你需要同事重点看某个页面再补一个路径https://xxxx.cpolar.cn/#/order/list这样同事能直接进入目标页面不需要到处点。七、一个可直接复用的命令顺序如果你想最快跑通按下面顺序做就行# 1. 启动后端 cd server ./mvnw spring-boot:run # 2. 启动前端 cd ../web npm install npm run dev # 3. 验证本地接口 curl http://127.0.0.1:8080/api/hello # 4. 映射前端端口 cpolar http 5173跑完以后把 cpolar 给你的公网地址发给同事。八、为什么这个方案适合团队协作这个流程之所以实用是因为它把“预览”这件事变得很轻不需要部署到远程服务器不需要改一堆环境变量不需要让同事装本地环境不需要来回打包、发压缩包。对小团队、个人项目、演示验收、临时联调来说这种方式比“先部署再看”更快。cpolar 的价值也在这里它不是替代你的开发环境而是把你的开发环境临时送到别人面前。你只要记住一点本地跑通之后再把唯一需要的入口临时公开出去。九、总结Vue3 Spring Boot 的本地全栈项目最怕的不是写不出来而是写完之后没人能方便地看。解决这件事最稳的路径就是本地把前后端分别跑通前端代理后端接口用 cpolar 映射前端端口发同事一个临时公网地址预览结束后立刻关闭。这样你不用折腾部署也能让同事快速验收页面、接口和交互。