Vue+webpack项目配置便于维护的目录结构教程详解

import axios from 'axios'
import {AXIOS_DEFAULT_CONFIG} from 'Config/index'
import {requestSuccessFunc, requestFailFunc, responseSuccessFunc, responseFailFunc} from 'Config/interceptors/axios'
let axiosInstance = {}
axiosInstance = axios.create(AXIOS_DEFAULT_CONFIG)
// 注入请求拦截
axiosInstance
 .interceptors.request.use(requestSuccessFunc, requestFailFunc)
// 注入失败拦截
axiosInstance
 .interceptors.response.use(responseSuccessFunc, responseFailFunc)
export default axiosInstance

src/plugins/inject.js

import axios from './axios'
import api from './api'
// GLOBAL.ajax = axios
export default {
 install: (Vue, options) => {
  Vue.prototype.$api = api
  Vue.prototype.$ajax = axios
  // 需要挂载的都放在这里
 }
}

src/plugins/router.js

import Vue from 'vue'
import Router from 'vue-router'
import ROUTES from 'Routes'
import {ROUTER_DEFAULT_CONFIG} from 'Config/index'
import {routerBeforeEachFunc} from 'Config/interceptors/router'
Vue.use(Router)
// 注入默认配置和路由表
let routerInstance = new Router({
 ...ROUTER_DEFAULT_CONFIG,
 routes: ROUTES
})
// 注入拦截器
routerInstance.beforeEach(routerBeforeEachFunc)
export default routerInstance

src/router目录

路由配置文件目录，同理按照页面的层次结构来，结构如下

我们来看src/router/index.js 和 src/common/index.js 即可

src/common/index.js

const routes = [
 {
  path: '/login',
  name: 'Login',
  component: () => import('Pages/login'),
  meta: {
   require: true,
   title: '登录'
  }
 },
 {
  path: '/register',
  name: 'register',
  component: () => import('Pages/register'),
  meta: {
   require: true,
   title: '注册'
  }
 },
 {
  path: '/404',
  name: '404',
  component: () => import('Pages/error/404.vue'),
  meta: {
   require: true,
   title: '404'
  }
 },
 {
  path: '/500',
  name: '500',
  component: () => import('Pages/error/500.vue'),
  meta: {
   require: true,
   title: '500'
  }
 },
 {
  path: '/403',
  name: '403',
  component: () => import('Pages/error/403.vue'),
  meta: {
   require: true,
   title: '403'
  }
 }
]
export default routes

src/router/index.js

import common from './common'
import doctor from './doctor'
import patient from './patient'
import test from './test'
const route = [								 
 6/8   首页 上一页 4 5 6 7 8 下一页 尾页