前言

在 github 中发现了一个宝藏项目，vue3-antdv-admin，此项目是一个基于 vite5.x + vue3.x + antd-design-vue4.x + typescript5.x 的后台管理系统。因此，想要研究一下此项目，并在研究的过程中搭建一个属于自己的后台管理项目，因此本项目是基于 vue3-antdv-admin 搭建的一个轻量级，简化版后台管理项目。并会在接下来的文档中记录逐步搭建过程。

一：克隆 vue3-antdv-admin 并在本地运行

git clone https://github.com/buqiyuan/vue3-antdv-admin

// node 版本最好在  >= 22 
// 全局安装 pnpm
npm install -g pnpm

// cd 到项目根目录中
cd vue3-antdv-admin

// 安装项目依赖
pnpm i

// 本地运行
pnpm serve

二、修改 vue3-antdv-admin 在本地运行时报错问题；

1、处理登录时图片验证码无法加载的问题

问题原因：由于服务器代理的原因导致在本地运行时接口请求失败；
解决方案如下：

// 第一步：在 vite.config.ts 中将 server.proxy 中的内容注释掉
proxy: {
    // '^/api': {
    //   target: 'https://nest-admin.buqiyuan.top',
    //   // target: 'http://127.0.0.1:7001',
    //   secure: false,
    //   agent: new https.Agent(),
    //   changeOrigin: true,
    //   rewrite: path => path.replace(/^\/api/, ''),
    // },
    // '^/upload': {
    //   target: 'https://nest-admin.buqiyuan.top/upload',
    //   // target: 'http://127.0.0.1:7001/upload',
    //   changeOrigin: true,
    //   rewrite: path => path.replace(/^\/upload/, ''),
    // },
},

// 第二步：在 .env.development 文件中修改 VITE_BASE_API_URL 
VITE_BASE_API_URL = 'https://nest-admin.buqiyuan.top/' 

// 第三步：重新运行，就可以正常请求所有接口了，包括登录时的图片验证码，以及登录等接口
pnpm serve

三、初始化自己的 vue 项目

// 使用 pnpm 命令初始化一个新的项目
pnpm create vue@latest