vue-element-admin框架改造

最新推荐文章于 2026-05-06 12:38:02 发布

原创最新推荐文章于 2026-05-06 12:38:02 发布 · 1.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue-element-admin项目中改造登录页面，移除mock数据，并重构路由逻辑，以适应实际权限管理需求。涉及修改main.js、store/user.js、permission.js和router/index.js，同时处理跨域配置及接口调整。

vue-element-admin

1.装包并运行项目
拉下vue-element-admin项目后，先用npm i进行装包，装包后，查看package.json文件,dev是运行，build:prod是打包
2.登录页面改造
登录界面
在src->views->login->index.vue下修改内容,详细信息如下:

main.js
在src->main.js下

删除.github,mock,plop-templates文件,mock是前端用来模拟数据的，plop-templates是一些简单的模板

接下来看看登录接口，代码如下

这里是调用的vuex中的login方法，src->store->modules->user.js代码如下

走到这里之后，就可以调一下登录接口了。
3.改造路由
在src->permission.js页面,删除之前

这里要对设置路由信息进行改造，我们大多数项目，都是用户拥有哪些权限，而不是通过角色直接去判断用户的权限，所以，这里我们把角色信息删除.下面是删除后的

接下来去vuex中去修改关于路由的代码 src->store->modules->permission.js
下面是删除之前的代码

下面是删除后的代码

接下来去看下路由信息,在src->router->index.js下,这是静态路由

这是动态路由,

把下面几个路由放到动态路由里

接下来添加一个路由,代码如下

启用项目，发现报错，找到vue.config.js文件,删除以下代码，项目启用成功

跨域配置

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:8089`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }