vercel配置vue3和koa2

410 阅读1分钟

vue3项目:

需要安装http-proxy-middleware配置代理 pnpm add http-proxy-middleware 解决跨域问题

根目录下新建vercel.json

{  
"rewrites": [  
{  
"source": "/api/(.*)",  
"destination": "/api/proxy"  
}  
]  
}

根目录下新建api文件夹,再在api文件夹里新建proxy.js文件

import { createProxyMiddleware } from 'http-proxy-middleware'  
  
export default function (req, res) {  
let target = ''  
配置代理,和vite.config.ts中的proxy差不多
// 代理1
if (req.url.includes('/api/api-two')) {  
target = 真实请求地址1  
}
// 代理2
else if (req.url.includes('/api/')) {  
target = 真实请求地址2 
}
console.log('target😊===》', target)  
  
createProxyMiddleware({  
target,  
changeOrigin: true,  
pathRewrite: {  
'^/api/api-two/': '/',  
'^/api/': '/',  
},  
})(req, res)  
}

koa2项目

根目录下新建vercel.json

{  
"builds": [  
{  
"src": "./index.js",  
"use": "@vercel/node"  
}  
],  
"routes": [  
{  
"src": "/(.*)",  
"dest": "/",  
"headers": {  
"Access-Control-Allow-Credentials": "true",  
"Access-Control-Allow-Origin": "*",  
"Access-Control-Allow-Methods": "GET,OPTIONS,PATCH,DELETE,POST,PUT",  
"Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"  
}  
}  
]  
}

根目录下新建index.js

index.js的内容就是koa2项目bin/www的内容

...
//port端口号改一下,不要用默认的
server.listen(port);
...

vercel配置

如果数据库用的是mongodb atlas 把network access 里面的IP Access 改一下,我暂时改为允许所有IP访问. 否则vercel连不上数据库.