Vue3 Vant H5 活动页本地开发手机外网预览与客户验收怎么打通做 H5 活动页时最烦人的往往不是页面写不出来而是“我电脑上好好的客户手机打不开”。本地http://localhost:5173只有自己能看运营同事在会议室扫不开客户在外地更扫不开。截图发过去又看不出交互录屏发过去又没法点按钮。活动页、报名页、营销落地页这类东西本来就该在手机上点一遍才放心。这篇就按一个纯前端 H5 活动页来跑Vue3 Vite 创建项目接入 Vant写一个移动端活动页再把本地 5173 端口临时映射成 HTTPS 外网预览链接。客户扫码能验收开发结束就关掉隧道不碰后台管理不放真实密钥也不把生产接口直接暴露出去。本文和 2026-05-30 那篇 Python Vue3 人脸考勤不是一个方向。那篇是 AI 视觉和考勤业务这篇只讲纯前端 H5 活动页的本地开发、手机预览和客户验收链路。1 为什么本地 H5 页面自己能看客户手机却打不开Vite 默认启动后经常看到这样的地址http://localhost:5173/localhost这个词看着普通其实它只指“当前这台机器”。你在自己电脑浏览器里打开它指向你的电脑客户在自己手机里打开它指向客户那台手机。客户手机上没有启动你的 Vite 服务自然打不开。同一局域网里的手机访问也有前提你的电脑和手机要连在同一个 Wi-Fi 下并且 Vite 要监听局域网网卡地址。只把服务跑在localhost上手机访问电脑 IP 也进不来。外地客户又多一层限制客户手机不在你的局域网里无法直接访问192.168.x.x:5173这种内网地址。这个时候就需要一个临时公网入口把本地开发服务转出去。这里用 cpolar 的原因很简单它只负责把本地 Vite dev server 的 5173 端口临时暴露成 HTTPS 预览地址。它不是生产部署方案也不承担后台鉴权、接口网关、发布系统这些工作。活动页还在你的电脑上跑验收链接只是临时给客户点开看页面。这张图可以画成三段链路开发者电脑本地浏览器访问localhost:5173同 Wi-Fi 手机访问电脑局域网 IP外地客户手机访问 cpolar 生成的 HTTPS 地址。读者一眼能看懂不是页面坏了是访问范围不同。2 环境准备检查 Node、创建 Vue3 Vite 项目动手前先确认 Node 环境。Vite 官方中文文档已经写明当前 Vite 需要 Node.js20.19或22.12。版本不够时脚手架、依赖安装、开发服务器都会报各种奇怪错误所以这里别硬跑。在终端执行node -v npm -v如果node -v输出类似v20.19.0、v22.12.0或更高版本就可以继续。这里用 LTS 版本更稳妥别在客户验收前临时换一套不熟的 Node 环境。创建项目用官方 Vite 命令npm create vitelatest h5-vant-preview -- --template vue cd h5-vant-preview npm install项目创建完后先看一眼目录。Vite 的 Vue 模板结构很干净活动页阶段主要改这几个文件h5-vant-preview/ ├── index.html ├── package.json ├── src/ │ ├── App.vue │ ├── main.js │ └── style.css └── vite.config.jsindex.html是入口src/main.js负责挂载 Vue 应用src/App.vue写页面结构src/style.css放全局样式。活动页刚开始别把页面拆得太碎一个文件先跑通客户确认方向后再抽组件更稳。再打开package.json确认脚本里有这三条{ scripts: { dev: vite, build: vite build, preview: vite preview } }开发阶段用dev正式发版前用build。preview只用于本地预览构建产物不等于生产发布这个点和客户沟通时也要说清楚。现在启动一次空模板确认基础链路没问题npm run dev终端会输出本地访问地址常见是VITE v7.x.x ready in 500 ms ➜ Local: http://localhost:5173/版本号按你本机安装结果显示不需要和上面完全一致。重点看Local地址是否出现浏览器打开是否能看到 Vue 默认页面。这里别急着写业务页面。空项目都打不开后面装 Vant、改样式、开外网链接只会把问题混在一起。先确认 Vite 基础项目正常排错会轻松很多。如果你用的是公司电脑还要提前确认两件事一是终端能正常执行npm install二是浏览器能打开本机的 5173 端口。有些公司安全软件会拦截本地端口访问遇到这种情况先把本地访问跑通再谈手机扫码。3 安装 Vant并写一个移动端活动页示例Vant 是面向移动端的 Vue 组件库写 H5 活动页很顺手。按钮、卡片、倒计时、弹窗、表单这些基础组件都有不用自己从零搓一套移动端样式。安装 Vantnpm i vant打开src/main.js引入 Vant 样式。为了教程简单这里直接全局引入样式页面里按需 import 组件import { createApp } from vue import vant/lib/index.css import ./style.css import App from ./App.vue createApp(App).mount(#app)接着把src/App.vue改成一个活动页。示例里有顶部氛围区、商品卡片、倒计时、报名按钮和弹窗足够模拟客户验收时最常看的几个点。script setup import { ref } from vue import { showToast } from vant import { Button, Card, Tag, CountDown, NoticeBar, Popup, Form, Field } from vant const showSignup ref(false) const form ref({ name: , mobile: }) const goods { title: 夏日团购体验卡, desc: 3 次门店体验 1 次专属顾问服务, price: 99.00, originPrice: 299.00, image: https://fastly.jsdelivr.net/npm/vant/assets/ipad.jpeg } const submitSignup () { if (!form.value.name || !form.value.mobile) { showToast(请先填写姓名和手机号) return } showToast(报名信息已记录到本地示例数据) showSignup.value false } /script template main classpage section classhero p classeyebrow618 门店活动/p h1手机上也能直接验收的 H5 活动页/h1 p classsub-title本地开发、手机预览、客户扫码确认一条链路跑通。/p /section NoticeBar left-iconvolume-o text演示页使用本地 mock 数据不连接生产接口不写入真实订单。 / section classpanel div classpanel-title span限时团购/span Tag typedanger客户验收版/Tag /div Card :pricegoods.price :origin-pricegoods.originPrice :descgoods.desc :titlegoods.title :thumbgoods.image template #tags Tag plain typeprimary移动端/Tag Tag plain typesuccessVant/Tag /template /Card div classcountdown-box span距离活动结束/span CountDown :time3 * 60 * 60 * 1000 formatHH:mm:ss / /div Button block round typeprimary sizelarge clickshowSignup true 立即报名体验 /Button /section section classtips h2验收时重点看什么/h2 ul li手机首屏是否完整展示活动利益点/li li按钮、弹窗、倒计时交互是否顺手/li li页面文案和价格是否符合运营口径/li /ul /section Popup v-model:showshowSignup round positionbottom div classsignup h2报名体验/h2 Form submitsubmitSignup Field v-modelform.name namename label姓名 placeholder请输入姓名 / Field v-modelform.mobile namemobile label手机号 placeholder请输入手机号 / Button block round typeprimary native-typesubmit 提交报名 /Button /Form /div /Popup /main /template再把src/style.css改成移动端风格:root { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; background: #f6f7fb; color: #1f2937; } body { margin: 0; } #app { min-height: 100vh; background: #f6f7fb; } .page { max-width: 480px; min-height: 100vh; margin: 0 auto; background: #f6f7fb; } .hero { padding: 32px 20px 28px; color: #fff; background: linear-gradient(135deg, #ff6b6b, #ff9f43); border-radius: 0 0 28px 28px; } .eyebrow { margin: 0 0 10px; font-size: 14px; opacity: 0.9; } .hero h1 { margin: 0; font-size: 28px; line-height: 1.25; } .sub-title { margin: 12px 0 0; font-size: 15px; line-height: 1.6; } .panel, .tips { margin: 14px; padding: 16px; background: #fff; border-radius: 18px; box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08); } .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; } .countdown-box { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; padding: 12px; background: #fff7ed; border-radius: 12px; color: #c2410c; } .tips h2, .signup h2 { margin: 0 0 12px; font-size: 18px; } .tips ul { padding-left: 18px; margin: 0; line-height: 1.9; color: #4b5563; } .signup { padding: 22px 16px 26px; }改完后可以顺手把src/components里模板自带的示例组件删掉。本文这个活动页没有用到默认组件留着不会影响运行但客户验收项目里少一点无关文件后面交接更清爽。再启动项目npm run dev浏览器打开http://localhost:5173/应该能看到一个适配手机宽度的活动页。这里提醒一下Vant 样式没生效时先检查src/main.js里有没有import vant/lib/index.css再看组件是否从vant正确引入。活动页写到这个程度已经够做第一轮验收了。客户通常不会在第一轮就关心组件拆分、状态管理、代码组织他们会先看三个更直观的问题首屏有没有吸引力按钮能不能点表单弹层是不是符合业务流程。所以这个示例没有引入 Pinia、路由、多页面配置。不是这些东西不好而是单页 H5 验收阶段少依赖更稳定。等客户确认文案和交互再把页面拆成HeroSection、GoodsCard、SignupPopup这些组件也不晚。这张图放手机宽度的页面截图重点展示首屏、商品卡片和报名按钮。客户验收时大家最在意的是“手机上像不像正式页面”不是桌面浏览器里有多宽。4 本地浏览器预览和局域网手机预览不是一回事本地浏览器确认的是“项目能跑、页面能渲染”。手机预览确认的是“移动端尺寸、触摸交互、真实浏览器环境”。这两个检查都要做。Vite 默认只给本机访问。想让同一 Wi-Fi 下的手机访问需要让 dev server 监听0.0.0.0npm run dev -- --host 0.0.0.0 --port 5173终端会多输出一个 Network 地址格式类似➜ Local: http://localhost:5173/ ➜ Network: http://192.168.1.8:5173/用手机连同一个 Wi-Fi再打开http://192.168.1.8:5173/。这里别把上面的 IP 原样复制必须用你终端里显示的那一个。如果手机打不开按这个顺序查手机和电脑是否在同一个 Wi-Fi别一个走公司网一个走手机热点。Vite 命令里是否带了--host 0.0.0.0。电脑防火墙是否拦了 5173 端口。页面代码里是否写死了localhost接口地址。局域网预览用于你和同事在同一办公室快速看页面。但客户在外地、运营在门店、老板在路上时局域网 IP 这条路就断了。下面才轮到 cpolar 出场。还有一个细节很容易忽略局域网地址一般是http://192.168.x.x:5173不少手机浏览器会对非 HTTPS 页面给出限制。普通展示页影响不大一旦页面涉及定位、复制、唤起外部 App、摄像头这些能力HTTP 环境和正式环境的表现就会不一致。客户验收活动页时尽量提前用 HTTPS 预览链接跑一遍。5 用 cpolar 暴露 5173生成 HTTPS 外网预览链接cpolar 的工作很明确把你本机的5173端口开一个临时公网入口。客户访问公网 URL请求会转回你的本地 Vite 服务。如果你的电脑还没安装 cpolar先从官网下载并按系统安装。官方入口如下cpolar 官网https://www.cpolar.com/下载页https://www.cpolar.com/download文档首页https://www.cpolar.com/docs/用户后台https://dashboard.cpolar.com/macOS 可以用 Homebrew 安装brew tap probezy/core brew install cpolarLinux 可以用官方一键安装脚本curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash安装后先确认命令可用cpolar version如果需要登录账号可以打开本地管理界面open http://127.0.0.1:9200Windows 用户直接在浏览器访问http://127.0.0.1:9200在活动页项目目录里保持 Vite 正在运行npm run dev -- --host 0.0.0.0 --port 5173另开一个终端启动 cpolar HTTP 隧道cpolar http 5173终端会输出公网访问地址通常能看到https://开头的 URL。也可以打开http://127.0.0.1:9200进入“状态 → 在线隧道列表”复制对应的公网地址。如果你更习惯图形界面也可以在 Web UI 里创建 HTTP 隧道隧道名称随便起一个好认的比如h5-vant-preview协议选择http本地地址填5173域名类型按当前账号能力选择随机域名地区按实际需要选择。创建成功后页面会跳到隧道列表再到“状态 → 在线隧道列表”里复制公网地址。命令行和 Web UI 二选一就行别在多个终端里反复开同一个端口的隧道。验收现场最怕链接一会儿这个、一会儿那个客户扫到旧二维码后反馈打不开排查起来很浪费时间。这里优先复制 HTTPS 地址发给客户。H5 页面里经常会遇到剪贴板、定位、相机、第三方 SDK 这类浏览器限制HTTPS 环境更接近真实验收条件。本文示例没调用这些能力但养成这个习惯很省心。复制完别立刻发群自己先用手机流量打开一次。这个动作能排除两个问题公网地址是否真的可访问以及页面里是否还残留局域网才能加载的资源。确认手机流量能打开再发客户沟通会顺很多。这张图标出本地地址5173和公网 HTTPS 地址。客户只需要看公网链接开发自己要确认公网链接确实转到了本地活动页。6 生成二维码发给客户做手机验收拿到 HTTPS 预览地址后直接发链接也行但 H5 活动页用二维码更稳妥。客户用微信、浏览器或企业 IM 扫一下就能看反馈也会更贴近真实使用路径。如果你想在终端里快速生成二维码可以用PREVIEW_URLhttps://你的-cpolar-预览地址 npx qrcode-terminal $PREVIEW_URL把二维码截图发给客户附上一句话就够这是本次 H5 活动页的临时验收链接只用于页面交互和文案确认。验收结束后我会关闭预览通道。这句话别省。客户知道这是临时链接就不会把它当成正式投放地址到处转发。运营同事也能理解现在验收的是页面效果不是生产环境链路。发给客户前可以顺手准备一个很短的验收说明。别写太复杂客户不是来帮你测系统的他只需要知道现在该看什么、反馈什么。请用手机扫码查看 H5 活动页重点确认首屏文案、价格、按钮交互和报名弹窗。 这个链接是临时预览地址不作为正式投放地址使用。客户验收时让对方重点看四件事首屏利益点是否清楚活动主题有没有歧义。商品卡片、倒计时、按钮、弹窗在手机上是否顺手。文案、价格、活动时间是否符合客户确认过的版本。不同手机浏览器里是否出现明显错位。如果客户说“我手机还是旧页面”先让对方刷新页面或者换浏览器打开。微信内置浏览器缓存比较积极活动页又经常改文案和图片验收阶段遇到缓存很正常。开发这边也可以在 URL 后加一个简单版本参数例如https://你的-cpolar-预览地址/?v20260609-1版本号不用复杂能让浏览器识别成新地址就行。客户反馈时让对方按“手机型号 浏览器 问题截图”的格式发回来。比如“iPhone 15微信内打开报名按钮被底部工具栏挡住”。这种反馈比一句“页面有问题”好处理太多。7 接口 Mock 和测试数据验收页别直连生产接口H5 活动页经常会有报名、抽奖、优惠券、商品库存这些接口。客户验收前端页面时别直接连生产接口尤其是带订单、优惠券、手机号、后台 token 的接口。本文示例里的报名提交只写了本地提示const submitSignup () { if (!form.value.name || !form.value.mobile) { showToast(请先填写姓名和手机号) return } showToast(报名信息已记录到本地示例数据) showSignup.value false }这不是偷懒而是有意把验收范围收住。客户看的是页面动线、文案、按钮、弹窗和视觉层级不应该因为一个生产接口限流、鉴权或数据污染把验收节奏打乱。我做活动页时会把验收分成两层页面验收只看前端效果接口联调单独约时间。两件事混在一起客户看到按钮没反应开发说接口没开后端说测试环境没数据最后没人知道这轮到底验收了什么。如果页面需要展示接口返回的数据可以先用本地 mock 文件。例如新建src/mock/activity.jsexport const activityMock { title: 夏日团购体验卡, price: 99.00, originPrice: 299.00, stock: 128, endTimeText: 今日 22:00 结束 }在页面里直接引入import { activityMock } from ./mock/activity console.log(activityMock.title)如果必须联调测试接口再考虑 Vite proxy。比如测试环境接口是http://127.0.0.1:3000可以在vite.config.js里配置import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, proxy: { /api: { target: http://127.0.0.1:3000, changeOrigin: true } } } })页面里请求/api/activity由 Vite dev server 代理到测试服务。这里有个坑你用 cpolar 暴露的是 5173 前端服务浏览器请求/api也会先打到 5173再由 Vite 代理转发。不要在前端代码里写死http://localhost:3000/api客户手机访问时localhost会指向客户手机自己。划重点验收链路里只放测试数据、mock 数据或测试环境接口。后台管理地址、生产 token、云服务密钥、真实支付回调都不要放进这个 H5 预览页里。如果页面要演示报名成功后的状态可以把状态写在前端内存里刷新后清空就行。客户只要确认“提交后看到什么”不需要真的生成一条生产报名记录。等接口联调开始再接测试库和测试账号。8 常见问题别等客户反馈了才开始查H5 验收的坑都不大但很容易卡在会议里。下面这些问题发客户前自己先过一遍。我的习惯是发链接前做一张小清单本机能打开、手机流量能打开、二维码能扫、报名弹窗能弹、刷新后还是新版本。五分钟能做完但能少掉很多低级返工。8.1 页面白屏白屏先看浏览器控制台。常见原因是依赖没装完整、组件引入写错、路径大小写不一致。本地先执行npm install npm run dev如果控制台报模块找不到检查package.json里是否已有vant再确认src/App.vue的 import 名称。Vant 组件名要从vant引入别写成不存在的本地路径。8.2 Vant 样式没生效页面能显示但按钮、卡片很丑通常是样式没引入。检查src/main.jsimport vant/lib/index.css如果你用了按需加载插件也要确认插件配置和 Vant 版本匹配。本文为了稳定直接引入 Vant 全量样式活动页验收阶段足够用。8.3 手机访问还是旧页面微信、浏览器、企业 IM 都会缓存页面。让客户刷新、关闭重新打开或者给链接加版本参数https://你的-cpolar-预览地址/?v20260609-2开发侧也要确认 Vite 终端还在运行cpolar 隧道还在线。只改了代码但服务已经停掉客户看到的自然不是最新状态。8.4 代码里写死 localhost这是最常见的手机端坑。你在电脑上写fetch(http://localhost:3000/api/activity)电脑浏览器能访问客户手机打不开。因为客户手机里的localhost不是你的电脑。验收阶段要么用 mock 数据要么用相对路径/api/activity配合 Vite proxy。8.5 接口跨域浏览器跨域报错时别让前端直接绕。验收期让 Vite proxy 处理测试接口前端只请求/api前缀。这样手机打开 cpolar HTTPS 链接时请求仍然进入同一个 5173 开发服务再转到测试接口。如果测试接口本身需要登录态或鉴权提前准备测试账号。不要为了图快把后台 token 写进前端代码。8.6 二维码过期或隧道地址变化免费随机公网地址会变化临时隧道关闭后之前的二维码就失效了。客户隔天再扫打不开这不是页面丢了而是预览通道已经变了。验收当天重新启动npm run dev -- --host 0.0.0.0 --port 5173 cpolar http 5173复制新的 HTTPS 地址再生成新的二维码发给客户。需要长期稳定地址时再去看 cpolar 固定二级子域名能力这篇只讲临时验收链路不把它当生产发布入口。9 安全边界只开放前端 dev server不开放后台和密钥cpolar 用在这篇里的位置很克制临时预览 H5 页面。它不是让你把本地所有服务都丢到公网也不是让客户直接访问后台管理。按这几条执行只映射5173这个前端开发服务端口。不映射后台 admin、数据库、Redis、对象存储控制台。前端代码里不写生产 token、云服务密钥、支付密钥。报名、抽奖、支付这类能力用 mock 或测试环境数据。验收结束后关闭 cpolar 终端停止临时隧道。关闭时在运行cpolar http 5173的终端按Ctrl C。如果 Vite 也不需要继续预览同样按Ctrl C停掉开发服务。验收结束后还可以把客户群里的临时二维码撤回或补一句“预览通道已关闭”。这不是形式主义而是避免客户第二天拿旧二维码继续反馈打不开。临时链接就按临时链接管理正式投放走正式域名、正式构建和正式监控。这里有个实际经验发给客户的验收说明里明确“链接仅用于页面确认”更稳妥。客户会更配合不会把它误发到投放群也不会拿它当正式线上地址。10 给客户验收前的交付小抄页面能打开不代表验收就顺利。H5 活动页的反馈链路很短客户扫完二维码通常会立刻在群里说“这个字改一下”“按钮颜色不对”“报名弹窗少一个字段”。如果开发这边没有提前约定反馈方式很容易变成一边改、一边发新链接、一边有人还在看旧页面。发二维码时把验收范围也一起发出去。范围越清楚客户越容易给出有效反馈。本轮请确认 1. 首屏标题、活动利益点、价格文案 2. 商品卡片、倒计时、报名按钮和弹窗交互 3. 手机端展示是否有遮挡、错位、文字溢出。 本轮不确认 1. 真实支付、真实下单、真实优惠券核销 2. 后台管理配置 3. 生产接口数据写入。这段话看起来有点啰嗦但非常管用。客户知道哪些能点、哪些只是演示开发也不用在群里反复解释“这个现在还不是正式接口”。如果客户反馈很多可以按版本号推进。例如第一轮链接用?v20260609-1第二轮改完用?v20260609-2。每次发新二维码时把本轮修改点列出来本轮已调整 - 首屏标题改为“夏日团购体验卡” - 报名按钮颜色改为品牌橙色 - 报名弹窗新增手机号输入框 - 底部说明文案缩短避免小屏手机换行过多。客户确认时也按版本确认别让“旧链接里的问题”混进“新链接的反馈”。活动页项目周期短信息越乱越容易返工。还有一个很实际的提醒不要在临时预览页里放统计代码和投放像素。客户验收阶段的点击都是测试行为放了真实统计会污染数据。需要验证埋点时用测试项目、测试环境或浏览器控制台日志单独确认。如果页面里有图片资源尽量放在项目本地或稳定的测试资源域名里。不要引用自己聊天软件里的临时图片链接也不要引用需要登录才能访问的素材地址。客户手机打开时图片加载不出来第一反应会是页面坏了而不是素材权限有问题。11 正式上线前这条预览链路要切回发布链路cpolar 预览链接用于客户临时验收不能直接投放。正式上线前还是要走构建、部署、域名、缓存、监控这条发布链路。本地确认后先执行构建npm run build构建成功后产物默认在dist目录。你可以本地预览一下构建结果npm run previewnpm run preview会启动一个本地静态预览服务它用于检查dist产物不是开发服务器。这里要重点看两件事一是页面资源路径是否正确二是构建后样式和交互是否和开发环境一致。如果你的正式站点部署在 CDN、对象存储或公司前端发布平台上还要额外检查缓存策略。活动页经常在上线前半小时还改文案缓存时间设得太长用户看到旧版本会很尴尬。验收阶段可以靠 URL 参数绕缓存正式环境要和发布平台的缓存刷新机制配合。从临时预览切到正式发布时也要把 mock 数据替换成测试确认过的接口再由测试环境走到生产环境。这个过程别靠“搜一下 mock 文件删掉”来处理可以在代码里明确区分配置const isPreview import.meta.env.VITE_APP_MODE preview export const apiBase isPreview ? /mock : /api对应的环境文件可以这样放.env.preview .env.production真正执行构建时再按团队约定选择环境。小团队没有完整发布系统也没关系至少要把“预览数据”和“生产数据”分开别让临时验收代码混进正式包。12 这套方案用于哪些场景哪些场景不要用可使用的场景很明确H5 活动页、报名页、营销落地页、移动端专题页、简单的客户确认页。它们的共同点是前端展示和交互占主要部分客户需要在真实手机上看效果但不需要马上接入复杂后台。不该使用的场景也要说清楚后台管理系统、含敏感数据的内部系统、生产 API 调试、数据库管理面板、带真实支付能力的完整交易链路。这些东西不应该为了“方便看一下”就临时暴露出去。如果页面必须展示登录后的用户数据准备测试账号和测试环境不要把个人真实账号发给客户也不要把鉴权信息写进前端代码。前端代码一旦发到浏览器客户就能在开发者工具里看到请求地址和部分静态内容别把它当成安全容器。团队协作时也可以把这套链路固定成一个小规范开发提测前先发本地截图页面可交互后发 cpolar 临时链接客户确认后再走正式构建。流程不复杂但能把“看不了页面”“不是最新版”“手机上错位”这些沟通问题提前消掉。13 总结到这里我们已经把一个 Vue3 Vant H5 活动页从本地开发跑到了手机外网预览本地 Vite 负责开发体验Vant 负责移动端 UI局域网预览负责办公室内快速检查cpolar 负责临时生成 HTTPS 链接给外地客户扫码验收。整条链路只开放前端 dev server验收结束就关闭边界清楚很多。关键步骤可以记成这三件事Vue3 Vite 项目先在本地跑通再安装 Vant 写活动页不要一上来就把外网预览、接口联调、页面样式混在一起排错。手机预览分两类同 Wi-Fi 用--host 0.0.0.0看局域网地址外地客户用cpolar http 5173生成 HTTPS 预览链接。验收页只放 mock 数据、测试数据和前端交互不暴露后台管理、生产接口、真实 token 和密钥。如果你平时经常做活动页、报名页、移动端营销页这套流程会很省沟通成本。客户拿手机扫码就能点运营能直接改文案开发也不用为了一个预览反复打包部署。等页面确认完再走正式构建和发布流程节奏更稳。