前言

本系列文章是为了帮助没有直接上手（或上手比较困难）做项目能力的初级前端开发工程师采用 V3 Admin Vite 开源模板来编写业务代码。

如果你是一个有经验的朋友，那建议你直接阅读文档即可：V3 Admin Vite 中文文档，因为本系列教程节奏偏慢。

本系列文章的同步视频教程版本地址：B 站（群友好心录制）

文章目的

本文将教会你如何使用该项目对接你自己的后端接口、如何处理接口跨域问题、如何正确的打包部署前端静态文件。

Begin

设置后端接口

我们先查看一下项目当前是如何拼接并调用后端接口的：

前端所有的请求最终都是通过 Axios 来发送的，我们可以找到封装 Axios 的文件，看见后端接口的 baseURL 是 import.meta.env.VITE_BASE_API

然后我们可以在 .env 配置文件中找到定义 VITE_BASE_API 的地方：

注意了， .env.development 代表开发环境配置， .env.staging 代表预发布环境配置，.env.production 代表正式环境配置。

我们可以看见，开发环境配置中，前端配置后端接口时采用了相对路径，使用的是 /api/v1。假如前端本地运行在 http://localhost:3333 路径下，也就意味着前端调用后端接口时，调用的具体的 baseURL 将会是 http://localhost:3333/api/v1

到这里还没结束，我们继续找到某一个具体的 API，比如登录接口：

可以发现该接口的 url 是 users/login，也就意味着，在调用该接口时，最终请求的路径将会是：baseURL + 该接口的 url = http://localhost:3333/api/v1/users/login

我们去登录页面，打开控制台 Network 实际测试一下登录接口：

可以发现和我们前文的推测一模一样。

反向代理

由于我们调用的接口（拿登录接口举例）完整 url 是：

http://localhost:3333/\color{red}{http://localhost:3333/}http://localhost:3333/ api/v1/\color{blue}{api/v1/}api/v1/ users/login\color{green}{users/login}users/login

但这个路径是一个本地路径，而我们的真实后端接口是部署的线上的，假如线上部署的登录接口完整路径是：

https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/\color{red}{https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/}https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/ api/v1/\color{blue}{api/v1/}api/v1/ users/login\color{green}{users/login}users/login

那么我们可以通过反向代理来将 http://localhost:3333 代理到 https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212

反向代理配置如图：

这段配置代表的意思简单来说就是去匹配 /api/v1 这个路径，假如发送的请求包含了这个路径，那么就将进行反向代理，将请求代理到 target 字段配置的路径。

直接采用这种反向代理的好处就是前端调用后端接口时不会产生跨域问题，但要记得这只是开发环境配置好了反向代理，以后部署前端到线上环境的时候，需要采用 Nginx 或其他工具来实现线上环境的反向代理。

CORS

如果你并不想用反向代理的方式来调用接口并解决跨域问题，那你就应该将你的 VITE_BASE_API 配置填写为完整的绝对路径：

这个时候，前端在调用接口时，将直接请求接口的真实地址，比如登录接口就将是：

https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/\color{red}{https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/}https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/ api/v1/\color{blue}{api/v1/}api/v1/ users/login\color{green}{users/login}users/login

由于我们运行前端所在的域名、协议、端口大概率和运行后端接口所在的域名、协议、端口不同，也就说产生了经典的跨域问题。这时候，就需要后端程序员对后端服务进行相应的配置，让后端服务允许我们前端直接跨域调用接口（工作量在后端，前端几乎不用做任何事情）。

打包

接口公共路径

打包的话比较简单，我们以正式环境配置 .env.production 为例。由于我们打包后部署的服务器上没有 Nginx 等工具帮助我们实现反向代理，所以我们就必须采用 CORS 的方式解决跨域问题，就需要将 VITE_BASE_API 写完整，也就是：

路由模式

然后选择一种路由方式（hash 或 html5），模板本身默认是 hash 模式，如果你想切换为 html5 模式的话，更改 VITE_ROUTER_HISTORY 配置即可：

但要注意，使用 html5 模式的话，就必须得在部署前端的服务器上新增一些配置，至于为什么，你可以仔细阅读这篇：官网

打包路径

最后再设置一下打包路径 VITE_PUBLIC_PATH 即可。模板项目本身是需要部署到这个域名下：https://un-pany.github.io/v3-admin-vite/，所以我们需要这么填写：

依此类推，

假如是要部署到 https://xxx.com/yyy/ 下，那么就需要填写 VITE_PUBLIC_PATH = '/yyy/'

假如是要部署到 https://xxx.com/ 下，那么就需要填写 VITE_PUBLIC_PATH = '/'

运行命令

打开 package.json 文件，可以看见所有该项目内置的命令：

和打包相关的命令是 build，我们以打包正式环境为例，就要运行下面的命令：

pnpm build:prod

这个命令就会自动去读取我们前文配置好的 .env.production 文件，

而 pnpm build:stage 会自动读取 .env.staging 文件，代表的是预发布环境。

打包完成后，就可以在目录下，看见一个名为 dist 的静态资源文件夹，这整个文件夹就是需要丢到前端服务器上去的东西。

End

本系列所有手摸手教程

V3 Admin Vite 相关链接

• 中文文档
• GitHub
• Gitee