Vue3+vite 部署到Vercel

前言

vite项目可以直接部署到vercel上，不用做任何修改。但是这里会遇到一个问题，就是网站访问接口跨域。如果是普通的服务器，那么通常就是用nginx做反向代理。但是对于Vercel我们无法这么做。

解决方法

采用vercel上的配置做代理。

1. 项目安装插件

   pnpm install http-proxy-middleware
   

2. 你的项目根目录新建一个文件.vercel.json

   //vercel.json文件
   {
     "rewrites": [ //寻找/api下的文件 然后可以在/api/proxy文件中进行跨域处理
       {
         "source": "/api/(.*)",
         "destination": "/api/proxy"
       }
     ]
    }
   

3. 在项目根目录建立这样一个文件/api/proxy.js 。用什么模块查看你的package.json。

   // 该服务为 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);
   };
   

4. 修改项目的接口，由项目的当前地址访问。下面是我写的一个例子

   <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>
   

注意的点

1. 这里注意一下，我之前把hello接口直接写在https://163.m.com上，结果导致一直访问404。增加了路径之后就可以正常访问了。
2. 一定要保证你的后端项目是开启了跨域