I think it's a good open source project, so I'll collect data to analyze it carefully and help more people to step into the development of background system as soon as possible. I don't give too much explanation about VSCode, which is a popular editor recently. The following reference materials have a detailed explanation

1. Touch your hand, take you to use vue to roll up background Series IV (a simple background basic template of vueAdmin)
2. Navigation guard
3. Request and response interceptor
4. Me admin template development document
5. me-admin-template
6. Me admin template online preview address
7. SLS admin Vue online preview address
8. Let me enlighten the vueadmin template online preview address

Read configuration according to environment

• Create a new config folder in the project
• Add index.js and write export default require('. / \ + process. Env. Node \' Env)
• The environment variables (root config settings) generated according to Vue cli have three environments: development, testing, production, and config. The directory structure is as follows

To be honest, I didn't quite understand, so I didn't make too many statements, and I'll add them later.

import axios from 'axios'
import _config from '@/_config'
import $ui from '@/_extends/ui'
// import qs from 'qs'

const instance = axios.create({
  baseURL: _config.apiBaseUrl, // Base URL of api
  timeout: 10000 // Request timeout
  // transformRequest: data => qs.stringify(data)
})
// request interceptor
instance.interceptors.request.use(
  e => {
    e.method = _config.isMockTest ? 'GET' : e.method
    e.url = _config.suffix ? e.url + _config.suffix : e.url
    e.params = e.params || {}
    e.headers = e.headers || {}
    if (localStorage.token) {
      e.headers['Authorization'] = localStorage.token
    }
    return e
  },
  error => ({ status: 0, msg: error.message })
)
// Response interceptor
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (resp && resp.status === 0 && resp.msg) {
      $ui.pages.warn(resp.msg)
    }
    if (response.status === 200) {
      return resp
    }
    return response
  },
  error => {
    const err = { status: 0, msg: 'Server exception' }
    if (
      error.message &&
      (error.message.indexOf('403') > -1 || error.message.indexOf('401') > -1)
    ) {
      err.msg = 'Permission verification failed, please login again'
    }
    $ui.pages.warn(err.msg)
    console.log('err' + error) // for debug
    return Promise.reject(err)
  }
)

export default instance

import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import logic from './logic'
Vue.use(Router)

const router = new Router({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    const position = {}
    if (to.hash) {
      position.selector = to.hash
    }
    position.x = 0
    position.y = 0
    return position
  },
  routes
})
router.beforeEach(logic.beforeEach)
router.afterEach(logic.afterEach)

export default router