本类为vue.config.js提供基础服务,主要业务为根据当前命令获得有效的页面信息,将页面信息整合为多页数据结构,供vue.config.js文件使用;也同时提供baseUrl属性,因涉及到多应用会有多个baseURL,baseUrl属性在npm run serve时恒为dev,在npm run build时,因为构建必须制定一个应用名,所以baseURL为对应的config.app.js中的正确配置

代码如下,不懂可留言讨论:

/**
 * @fileOverview vue配置所需数据处理类
 * @author Franks.T.D
 * @date 2018/06/17
 */

const path = require('path')
const glob = require('glob')
const AppConf = require('./apps_config_class')
const appconf = new AppConf()
const handleError = Symbol.for('handleError')

module.exports = class VueConf {
  constructor (argv) {
    this.globPathHtml = ['./src/modules/**/index.html', 'template'] // 入口模板正则
    this.globPathJs = ['./src/modules/**/main.js', 'entry'] // 入口脚本正则
    this.rawArgv = argv.slice(2)
    this.newArgv = argv.slice(3)
    this.baseUrl = 'dev'
    this.pages = Object.create(null)
    this.tempSet = new Set()
    this.init()
  }
  init () {
    try {
      while (this.vueEntryPages(...this.globPathHtml) && this.vueEntryPages(...this.globPathJs)) return this.pages
    } catch (err) {
      console.log('获取多页数据错误:', err)
    }
  }
  allPages () {
    const result = Object.create(null)
    for (let item of Object.values(appconf.urls)) Object.assign(result, item)
    return result
  }
  validPages () {
    let [result, allPages] = [Object.create(null), this.allPages()]
    if (this.rawArgv[0] === 'serve') {
      if (this.rawArgv.length === 1) {
        result = allPages
      } else {
        for (let item of this.newArgv) Reflect.set(result, item, allPages[item])
      }
    } else if (this.rawArgv[0] === 'build') {
      this.baseUrl = appconf.baseUrl(this.newArgv[0])
      result = appconf.urls[this.newArgv[0]]
    }
    return result
  }
  vueEntryPages (globPath, type) {
    const [pages, tempSet, validPages] = [this.pages, this.tempSet, this.validPages()]
    let [matchList, tempArr, modName] = [glob.sync(globPath), [], null]
    if (matchList.length !== 0) {
      for (let entry of matchList) {
        tempArr = path.dirname(entry, path.extname(entry)).split('/')
        modName = tempArr[tempArr.length - 1]
        if (!Object.keys(validPages).includes(modName)) {
          continue
        } else {
          if (tempSet.has(modName)) {
            Object.assign(pages[modName], { [type]: entry, 'filename': validPages[modName] })
          } else {
            Reflect.set(pages, modName, { [type]: entry }) && tempSet.add(modName)
          }
        }
      }
      if (Object.keys(pages).length !== 0) {
        return true
      } else {
        this[handleError](type)
      }
    } else {
      this[handleError](type)
    }
  }
  [handleError] (type) {
    if (type === 'template') {
      throw new Error('无法获取多页入口模板')
    } else if (type === 'entry') {
      throw new Error('无法获取多页入口脚本')
    } else {
      throw new Error('无法获取多页信息')
    }
  }
}
方便理解理解,推荐大家看下《 vue-cli 3.0脚手架配置及扩展 (二):vue.config.js多页配置
Logo

前往低代码交流专区

更多推荐