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

新建项目的时候创建合理的目录结构便于后期的维护是很重要

环境：vue、webpack

目录结构：

项目子目录结构

子目录结构都差不多，主要目录是在src下面操作

src目录结构

src/common 目录

主要用来存放公共的文件

src/components

主要用来存放公共的组件

src/config

用来存放配置文件，文件目录如下

src/config/index.js 配置目录入口文件

import api from './website'
// 当前平台
export const HOST_PLATFORM = 'WEB'
// 当前环境
export const NODE_ENV = process.env.NODE_ENV || 'prod'
// 是否开启监控
export const MONITOR_ENABLE = true
// 路由默认配置
export const ROUTER_DEFAULT_CONFIG = {
 // mode: 'history',
 waitForData: true,
 transitionOnLoad: true
}
// axios 默认配置
export const AXIOS_DEFAULT_CONFIG = {
 timeout: 20000,
 maxContentLength: 2000,
 headers: {}
}
// vuex 默认配置
export const VUEX_DEFAULT_CONFIG = {
 strict: process.env.NODE_ENV !== 'production'
}
// API 默认配置
export const API_DEFAULT_CONFIG = {
 baseURL: api,
 // 图标地址
 imgUrl: `${api}/api/system/icon.do?name=`,
 // 菜单图标地址
 menuImgUrl: `${api}/`,
 dicomUrl: `${api}/testDICOM/`,
 // 请求参数格式 json/form-data
 isJSON: true,
 // 请求加载效果， 支持element-ui所有参数配置
 loading: { text: '加载中' },
 // 是否开启mock
 mock: false,
 // 是否开启debug
 debug: false,
 // 定义全局变量
 ippid: 'test'
}
export const CONSOLE_REQUEST_ENABLE = true // 开启请求参数打印
export const CONSOLE_RESPONSE_ENABLE = false // 开启响应参数打印
export const CONSOLE_ROUTER_ENABLE = false // 打印路由信息
export const CONSOLE_MONITOR_ENABLE = true // 监控记录打印

src/config/website.js 动态配置ip文件

/**
 * 动态匹配api接口地址
 */
const website = [
 {
  web: 'localhost:9000',
  api: '//192.168.0.170:8080/xhhms',
  env: 'dev'
 },
 {
  web: '127.0.0.1:8000',
  api: '//192.168.0.149:8080/xhhms',
  env: 'dev'
 }
]
let matchApi = website.filter(item => new RegExp(item.web).test(location.href))
if (matchApi.length > 1) {
 console.error(`${location.href}: 该站点映射了多个api地址${matchApi.map(item => item.api).join(',')}，默认选取第一个匹配项`)								 
 1/8    1 2 3 4 5 6 下一页 尾页