把 Vue 打包成“一坨”静态 HTML 扔进对象存储，也能跑全套 SPA？

“Serverless 不能跑 Vue？会丢响应式？路由一刷新就 404？”
如果你也有类似顾虑，那一定是把“托管”和“运算”混为一谈了。
今天这篇文章把“静态 HTML 到底怎么在 Serverless 架构里活成一条龙”讲透。

一、先拆概念：UI 只是“文件”，API 才是“计算”

在 Serverless 世界里，前端被浓缩成一群 .html .js .css 文件，它们唯一的使命就是“躺平”——躺在对象存储里，被浏览器下载。
至于 Vue 的双向绑定、路由跳转、Pinia 状态树，全部发生在用户手机里的那台 Chrome，跟云端没半毛钱关系。
所以，托管方式再“Serverless”，也不会阉割 JS 语法，更不会让 v-model 失灵。

二、三步把 Vue 项目变成“静态 HTML”

1. npm run build
   Vue-CLI 已经把 .vue 单文件编译成浏览器认识的原生 JS，目录里只剩 dist/。

2. 打开腾讯云 COS（或阿里云 OSS）

   • 建个桶，权限选“公有读私有写”
   • 把“静态网站”开关点亮
   • 索引文档写 index.html，错误文档也写 index.html——刷新 404 的坑就此填平

3. 把 dist/ 拖进去
   控制台立刻回你一条
   https://xxx.cos-website.xxx.myqcloud.com
   点开，Vue 首页秒出，路由切换丝滑，F12 也看得见熟悉的 Vue DevTools 粉色 logo。
   整套流程 3 分钟，没有 Nginx、没有 Dockerfile、更不买 EC2。

三、浏览器怎么跟“无服务器”后端谈恋爱？

前端再静态，也总要拉数据。
Serverless 的做法是：让 FaaS 函数（腾讯云 SCF、阿里云 FC）只负责“被触发”，API 网关做红娘。

前端代码里，依旧

axios.get('/api/users')

只不过 baseURL 换成网关域名。
网关收到请求后触发函数，函数连数据库、拼 JSON、塞上

Access-Control-Allow-Origin: *

返回，前端拿到数据继续渲染。
整个交互跟传统 Node 服务零差异，却省掉了服务器、负载均衡、运维值班。

四、你可能担心的三个暗坑，官方早就给梯子

1. History 路由 404
   对象存储的错误页指回 index.html，Vue-Router 会接管路径，不再向服务器要资源。

2. 文件上传
   函数支持 multipart/form-data，二进制先读内存，再直传 COS，全程几十行代码。

3. 跨域
   网关一键开启 CORS，或在函数返回头里硬写 Access-Control-Allow-Origin，浏览器不再拦截。

五、结论：静态 HTML 不是“残血版”，而是“究极体”

当你把 Vue 项目压成纯静态并扔进对象存储那一刻，它就已经是完整可用的 SPA；
Serverless 只是提供了“无限带宽 + 全球 CDN + 0 元闲置”的豪华跑道。
后续业务涨十倍，你依旧不用半夜起床扩机器——对象存储自动扛流量，API 网关按实际毫秒计费。
前端开发体验原地不动，运维成本却直接归零，这才是“静态 HTML”在 Serverless 时代最性感的模样。