子非鱼博客

搭建一个vue-admin-template项目流程讲解

拉取代码到本地

1.创建一个本地仓库

2.拉取github上的框架代码

git clone https://github.com/PanJiaChen/vue-admin-template.git

去掉登录页面重定向参数

/src/permission.js 文件中所有 next(`/login?redirect=${to.path}`) 替换为 next(`/login`)
/src/layout/components/Navbar.vue 文件中 this.$router.push(`/login?redirect=${this.$route.fullPath}`) 替换为 this.$router.push(`/login`)

去掉框架中对用户名的限制

/src/utils/validate.js 文件中 validUsername 方法直接返回true即可

设置系统名以及是否显示logo、header是否浮动

把mock模拟请求修改为系统请求文件

修改main.js文件，去掉以下代码

修改 vue.config.js， 去掉 before: require('./mock/mock-server.js') 这段代码

import request from '@/utils/request'
Vue.prototype.$axios = request 

引用mixin文件，方便添加公用方法

import mixin from './mixin'
Vue.mixin(mixin)

export default {
  methods: {
    // 公用方法
    test() {}
  }
}

添加动态路由地址

1.在/src/utils/index.js文件中添加如下方法

// 获取登录后默认跳转路径
export function getDefaultRedirect(routeList) {
  let path = null;
  for (let i = 0; i < routeList.length; i++) {
    let item = routeList[i];
    if(!item.hidden && !path) {
      path = item.path;
    }
    if(item.path === '/') {
      path = null;
      break;
    }
  }
  return path;
}

// 处理动态的路由列表
export function handleAsyncRoutes(routeList) {
  const res = []

  routeList.forEach(route => {
    let component = resolve => require(['@/layout'], resolve);
    if (route.component != '@/layout') {
      let view = route.component.substring(7, route.component.length);
      component = resolve => require([`@/views${view}`], resolve);
    }

    let tmp = {
      name: route.name,
      path: route.url,
      hidden: !!route.hideInMenu,
      // require组件地址时请在变量前多写点目录路径，别直接`@${xx}`或`@/${xx}`，不然会报各种错
      component: component,
      meta: {
        title: route.title,
        icon: route.icon
      }
    }
    if (route.children && route.children.length) {
      tmp.children = handleAsyncRoutes(route.children)
      tmp.redirect = tmp.children[0].path
    }
    res.push(tmp)
  })

  return res
}

2.修改/src/router/index.js文件

把文件中的 const router = createRouter() 修改为 export const router = createRouter()

3.修改/src/permission.js文件

把 import router from './router' 修改为

import {router, constantRoutes} from './router'
import { getDefaultRedirect, handleAsyncRoutes } from '@/utils/index'

代码 await store.dispatch('user/getInfo') 下方添加如下代码

const userRouter = await store.dispatch('user/getUserRouter')
const accessRoutes = handleAsyncRoutes(userRouter)
// 因动态获取路由为异步请求，所以需把404跳转挪到这里进行添加
accessRoutes.push({ path: '*', redirect: '/404', hidden: true })
// 若无固定首页，首页重定向到第一个路由地址
let homePath = getDefaultRedirect()
if(homePath) accessRoutes.push({path: '/', redirect: homePath, hidden: true});
router.addRoutes(accessRoutes)
next({ ...to, replace: true })

打包报错解决方案

解决方法是在babel.config.js里配置unambiguous设置，让babel和webpack一样严格区分commonJS文件和ES6文件。

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType: 'module'
}