Vue 3 已经成为当前前端项目的主流选择，但一个完整的应用往往离不开后端接口的支持。如果不想专门购买云主机、配置 Nginx 和运行环境，百度云函数计算 CFC（Cloud Function Compute）是一个值得考虑的方案。它基于 Serverless 架构，把后端逻辑封装成一个个函数，由百度云负责调度和弹性伸缩，开发者只需要关注业务代码本身。这篇文章就围绕 Vue 3 与 CFC 的工程化整合，从本地联调到线上部署做一次完整的梳理。
一、为什么 Vue 3 项目适合搭配 CFC
传统的前后端分离项目，后端通常需要一个常驻运行的服务，比如 Node.js 的 Express 或者 Java 的 Spring Boot。这意味着你必须购买一台云服务器，安装运行时环境，配置进程守护和日志采集，还要为流量高峰预留资源。对于中小型项目、活动页面、工具类应用来说，这些成本往往显得过重。
CFC 的计费方式是按调用次数和执行时长计算，没有请求时不产生费用，这对流量不稳定的前端项目非常友好。以一个 Vue 3 编写的内部管理后台为例，如果每天只有几百次接口调用，使用 CFC 的成本几乎可以忽略不计。同时 CFC 原生支持 Node.js 运行时，前端开发者可以直接用熟悉的 JavaScript 或 TypeScript 编写后端函数，学习成本远低于切换到其他后端语言。
从工程化角度看，CFC 还天然契合前后端同仓的开发模式。可以把 Vue 3 的源码放在 src 目录，CFC 函数放在 functions 目录，通过同一套 npm scripts 管理构建和部署，形成一个完整的 Monorepo 式工作流。
二、本地开发阶段的工程化准备
假设项目结构如下：src 存放 Vue 3 代码，functions 存放 CFC 函数代码。首先在项目根目录初始化：
mkdir vue3-cfc-demo && cd vue3-cfc-demo npm create vite@latest . -- --template vue-ts mkdir functions cd functions npm init -y npm install @baiducloud/sdk
本地联调阶段，最直接的方式是利用 Vite 的代理功能，把以 /api 开头的请求转发到本地模拟的函数服务。可以在 vite.config.ts 中这样配置：
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:9000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
本地模拟函数服务可以用一个简单的 Node.js HTTP 服务承担，它加载 functions 目录下的处理函数并按路由分发。这样做的好处是，本地写业务逻辑时和线上 CFC 的事件处理结构保持一致，等到部署时不需要大改代码。
一个典型的 CFC 函数采用事件回调的写法，签名是 handler(event, context, callback)。event 对象里包含 HTTP 请求的方法、头部、查询参数和请求体，本地模拟服务只要把 HTTP 请求转换成同样结构的 event 传入即可。这种约定先行的做法是工程化的关键，它保证了环境差异不影响业务代码。
三、编写 CFC 函数并处理跨域
下面是一个完整的函数示例，实现一个简单的用户列表接口，并处理跨域请求。CFC 通过 HTTP 触发器暴露后，浏览器直接请求会涉及 CORS 问题，必须在函数返回中显式设置响应头：
// functions/user/list.js
exports.handler = (event, context, callback) => {
// 处理预检请求
const method = event.httpMethod;
const headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
};
if (method === 'OPTIONS') {
return callback(null, { statusCode: 204, headers, body: '' });
}
const users = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
];
callback(null, {
statusCode: 200,
headers: { ...headers, 'Content-Type': 'application/json' },
body: JSON.stringify({ code: 0, data: users })
});
};
在 Vue 3 组件里调用就非常自然了，使用组合式 API 封装一个请求函数：
import { ref, onMounted } from 'vue';
export function useUserList() {
const list = ref<any[]>([]);
const loading = ref(false);
onMounted(async () => {
loading.value = true;
const res = await fetch('/api/user/list');
const json = await res.json();
list.value = json.data;
loading.value = false;
});
return { list, loading };
}
需要注意的是，生产环境不建议把 Access-Control-Allow-Origin 写成星号，更稳妥的做法是读取环境变量中配置的域名白名单，在函数内做匹配后再返回，避免接口被任意站点引用。
四、部署流程与工程化脚本
CFC 支持控制台上传 zip 包和命令行工具部署两种方式。工程化项目推荐后者，可以把部署动作固化到 npm scripts 中。使用百度云命令行工具 BCLI 或者直接调用 SDK 都能完成函数创建和代码更新。以 SDK 方式为例，核心流程是先读取 AK/SK 凭证，再把函数目录压缩成 zip 上传：
const CfcClient = require('@baiducloud/sdk').CfcClient;
const config = {
credentials: {
ak: process.env.BAIDU_AK,
sk: process.env.BAIDU_SK
},
region: 'bd'
};
const client = new CfcClient(config);
async function deploy() {
const zipFile = await packZip('./functions/user');
await client.createFunctionFromZip({
functionName: 'user-list',
zipFile,
handler: 'list.handler',
runtime: 'nodejs16',
memorySize: 256,
timeout: 10
});
console.log('部署完成');
}
deploy();
AK 和 SK 这类敏感信息不要写进代码仓库，建议放在本地 .env 文件中并加入 .gitignore。CI/CD 环境中则通过流水线的密钥管理注入，构建脚本只读取环境变量。
关于函数配置，有两点经验值得注意。一是内存分配，Node.js 函数默认 128MB 在处理 JSON 序列化和并发请求时容易触顶，建议设置为 256MB 起步；二是超时时间，涉及数据库查询的接口要留出足够余量，避免慢查询导致函数被强制中断。
五、冷启动、日志与常见问题
Serverless 的冷启动是绕不开的话题。CFC 在长时间没有请求后会释放运行实例，下一次调用需要重新初始化运行时和加载代码。缓解办法有几个：把依赖包控制在最小范围，避免在函数入口之外执行耗时初始化；利用预留实例功能保持常驻；或者在低峰期用定时任务 Ping 一次函数。对于管理后台这类内部应用，几百毫秒的冷启动延迟通常可以接受。
日志排查方面，CFC 控制台提供函数执行日志查询，函数内的 console.log 输出都会被收集。建议在代码里统一封装日志格式，附带请求 ID 和关键参数，出现问题时能快速定位。此外要留意函数的错误处理，未捕获的异常会导致函数返回 5xx，最好在 handler 外层套一层 try-catch，把错误信息以结构化 JSON 返回给前端，便于在界面上展示友好提示。
总体来说，Vue 3 与百度云 CFC 的组合让前端团队可以用较低的成本获得完整的全栈交付能力。把函数编写、本地模拟、打包部署这一整套流程脚本化之后，从提交代码到接口上线可以在几分钟内完成，这正是工程化带来的效率提升。
Vue 3百度云CFCServerless修改时间：2026-09-16 01:42:34