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

import { API_DEFAULT_CONFIG } from 'Config'

Vue.mixin({
computed: {
// 图片根地址
imgUrl () {
return API_DEFAULT_CONFIG.imgUrl
},
baseUrl () {
return API_DEFAULT_CONFIG.baseURL
},
ippid () {
return API_DEFAULT_CONFIG.ippid
},
dicomUrl () {
return API_DEFAULT_CONFIG.dicomUrl
}
}
})

src/pages目录

主要的页面文件，目录结构主要按照层次结构来分。

ex:该页面主要跟医生相关，主要包含云搜索（cloud）、个人中心（myCenter）、工作中心（workCenter）、搜索（serach）、同理子层级也同样区分、目录结构如下

至于公共页面可以放在common文件目录下，也可以摆在文件夹外面。

src/plugins目录

也是配置文件目录

src/plugins/api.js

import axios from './axios'
import _pick from 'lodash/pick'
import _assign from 'lodash/assign'
import _isEmpty from 'lodash/isEmpty'
import { assert } from 'Utils/tools'
import { API_DEFAULT_CONFIG } from 'Config'
import API_CONFIG from 'Service/api'
class MakeApi {
 constructor (options) {
  this.api = {}
  this.options = Object.assign({}, options)
  this.apiBuilder(options)
 }
 apiBuilder ({
  config = {}
 }) {
  Object.keys(config).map(namespace => {
   this._apiSingleBuilder({
    namespace,
    config: config[namespace]   })
  })
 }
 _apiSingleBuilder ({
  namespace,
  config = {}
 }) {
  config.forEach(api => {
   const { methodsName, desc, params, method, path, mockPath } = api
   let { mock, mockBaseURL, baseURL, debug, isJSON, loading } = this.options
   let url = mock ? (mockBaseURL + mockPath) : (baseURL + path)
   debug && assert(methodsName, `${url} :接口methodsName属性不能为空`)
   debug && assert(url.indexOf('/') === 0, `${url} :接口路径path，首字符应为/`)
   Object.defineProperty(this.api, methodsName, {
    value (outerParams, outerOptions) {
     let allowtParam = (outerOptions && outerOptions.allowParams) || {}
     let _data = (outerOptions && outerOptions.isFormData) ? outerParams : _isEmpty(outerParams) ? params : _pick(_assign({}, params, outerParams), Object.keys(Object.assign(params, allowtParam)))
     return axios(_assign({
      url,
      desc,
      method,
      isJSON,
      loading
     }, outerOptions, { data: _data }))
    }
   })
  })
 }
}
export default new MakeApi({
 config: API_CONFIG,
 ...API_DEFAULT_CONFIG
})['api']

src/plugins/axios.js