Vue3+vite 部署到Vercel
前言
vite 项目可以直接部署到 vercel 上,不用做任何修改。但是这里会遇到一个问题,就是网站访问接口跨域。如果是普通的服务器,那么通常就是用 nginx 做反向代理。但是对于 Vercel 我们无法这么做。
解决方法
采用 vercel 上的配置做代理。
项目安装插件
1
pnpm install http-proxy-middleware
你的项目根目录新建一个文件
.vercel.json
1
2
3
4
5
6
7
8
9
10//vercel.json文件
{
"rewrites": [
//寻找/api下的文件 然后可以在/api/proxy文件中进行跨域处理
{
"source": "/api/(.*)",
"destination": "/api/proxy"
}
]
}在项目根目录建立这样一个文件
/api/proxy.js
。用什么模块查看你的package.json
。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23// 该服务为 vercel serve跨域处理
// const { createProxyMiddleware } = require('http-proxy-middleware') //commjs模块
import { createProxyMiddleware } from "http-proxy-middleware"; // es模块
// export.modules = (res, res) => {
export default (req, res) => {
let target = "";
// 代理目标地址
// xxxxx 替换为你跨域请求的服务器 如: <http://baidu.com>
if (req.url.startsWith("/api")) {
//这里使用/api可能会与vercel serverless 的 api 路径冲突,根据接口进行调整
target = "<https://163.m.com>"; //这里就是在vite中配置的一样
}
// 创建代理对象并转发请求
createProxyMiddleware({
target,
changeOrigin: true,
pathRewrite: {
// 通过路径重写,去除请求路径中的 `/api`
"^/api/": "/",
},
})(req, res);
};修改项目的接口,由项目的当前地址访问。下面是我写的一个例子
1
2
3
4
5
6
7
8<script setup lang="ts">
import { excludes } from "@/router/keepAlive";
import axios from "axios";
axios('/api/hello/say').then((res:any)=>{
console.log(res)
})
// 假设接口https://163.m.com/say/hello, 删除前面的host,并且配合第3步的识别加上/api
</script>
注意的点
- 这里注意一下,我之前把 hello 接口直接写在https://163.m.com上,结果导致一直访问404。增加了路径之后就可以正常访问了。
- 一定要保证你的后端项目是开启了跨域