一二三应用开发平台——vue-element-plus-admin整合后端实战，实现系统登录、缓存用户数据、实现动态路由-CSDN博客

文章讲述了如何将vue-element-plus-admin前端框架整合进开发平台，包括删除前端项目的.git目录，调整proxy设置以调用后端服务，实现登录功能，并通过改造代码实现动态路由，根据后端返回的权限动态构建前端路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标

整合vue-element-plus-admin前端框架，作为开发平台的前端。
在这里插入图片描述

准备工作

前端选用vue-element-plus-admin，地址 https://gitee.com/kailong110120130/vue-element-plus-admin。
首先clone项目，然后整合到开发平台中去。这是一个独立的前端的项目，而我将其放到后端项目根目录下，即建一个platform-web的目录，将vue-element-plus-admin目录下的内容放进去，相当于将前端项目视为整个工程项目的一个模块。
为什么要这么做呢？原因也简单，从架构上而言，前后端是分离的，不过当前这个平台前后端都是我在做，因此开发模式并不是前后端分别开发，通过mock数据和联调再整合到一块去，而是对于一个功能，例如组织机构管理，往往是后端和前端是一块做的。这样从开发上，从Git单次提交上，都是对于一个功能的完整处理。

既然是将前端项目视为整个工程的一个模块，是一个git仓库统一管理，那么前端项目下就不应该还存在.git目录了。如果直接删除，运行pnpm install会报错，原因是使用了husky，而husky是依赖git 才能安装。
经过几次尝试，做了以下处理。先clone，然后执行pnpm install，确保前端项目能运转起来。然后执行 pnpm unistall husky，既卸载掉husky，然后再删除掉前端项目根目录下的.git目录，这样既保证了前端项目能正常运转，又将其纳入了整个工程。

调用后端服务

完成了基本的源码下载和整合到项目工程，接下来考虑的就是怎么实现前端调用后端服务。
前端使用默认的localhost:4000,后端服务的地址是localhost:8080，首先解决前后端联通性问题。
首先调整的是vite.config.ts中的server节点下的proxy设置，具体如下：

server: {
   
      port: 4000,
      proxy: {
   
        //  系统管理模块
        '/system': {
   
          target: env.VITE_BASE_URL,
          changeOrigin: true         
        }        
      }
}

即把路径以/system起始的请求转发到后端，其中env.VITE_BASE_URL是在local.env中定义：

# 环境
NODE_ENV=development

# 请求路径
VITE_BASE_URL='http://localhost:8080'

# 接口前缀
VITE_API_BASEPATH=/my-api

# 打包路径
VITE_BASE_PATH=/

# 标题
VITE_APP_TITLE=ElementAdmin

系统登录

前后端联通后，首先实现的功能，肯定是登录。
结果看了下官方文档，只有安装、目录结构和功能组件的大概介绍，并没有如何跟后端整合的介绍。百度搜了下，结果都是基vue-element-admin的，也就是vue2.0+Element UI 的框架。看来新技术与框架只能自己来开荒了，通过源码阅读与摸索来实现。
前端框架能独立运行，输入账号密码后完成登录，进入系统首页，实际上使用的是mock数据，登录方法位于mock/user/index.ts中。

import {
    config } from '@/config/axios/config'
import {
    MockMethod } from 'vite-plugin-mock'

const {
    result_code } = config

const timeout = 1000

const List: {
   
  username: string
  password: string
  role: string
  roleId: string
  permissions: string | string[]
}[] = [
    {
   
      username: 'admin',
      password: 'admin',
      role: 'admin',
      roleId: '1',
      permissions: ['*.*.*']
    },
    {
   
      username: 'test',
      password: 'test',
      role: 'test',
      roleId: '2',
      permissions: ['example:dialog:create', 'example:dialog:delete']
    }
  ]

export default [
  // 列表接口
  {
   
    url: '/user/list',
    method: 'get',
    response: ({
    query }) => {
   
      const {
    username, pageIndex, pageSize } = query

      const mockList = List.filter((item) => {
   
        if (username && item.username.indexOf(username) < 0) return false
        return true
      })
      const