Vue-CLI - Aufzeichnung der Schritte zur mehrseitigen Verzeichnisverpackung

const Pfad = require('Pfad')
const glob = erfordern('glob')
const fs = erfordern('fs')

const isProduction = process.env.NODE_ENV === 'Produktion'

// Seitentitel für verschiedene Module anpassen
const TitelMap = {
  Index: 'Startseite'
}

Funktion getPages (globPath) {
  const Seiten = {}
  glob.sync(globPath).forEach((item) => {
    const stats = fs.statSync(Element)
    wenn (stats.isDirectory()) {
      const basename = Pfad.basename(Element, Pfad.extname(Element))

      // Wenn sich die Datei „index.html“ im Modulverzeichnis befindet, verwenden Sie diese Datei als HTML-Vorlagendatei const template = fs.existsSync(`${item}/index.html`)
        ? `${item}/index.html`
        : Pfad.beitreten(__Verzeichnisname, '../index.html')

      Seiten[Basisname] = {
        Eintrag: `${item}/main.js`,
        Titel: titleMap[Basisname] || 'Standardseite',
        Vorlage,
        // Diese Codezeile ist sehr wichtig // Kompatibel mit Entwicklung und Produktion. Die HTML-Seitenhierarchie ist konsistenter Dateiname: isProduction ? 'index.html' : `${basename}/index.html`
      }
    }
  })
  Zurück zu den Seiten
}

const Seiten = getPages(Pfad.join(__dirname, '../src/pages/*'))

module.exports = Seiten

const Kreide = erforderlich('Kreide')
const rimraf = erfordern('rimraf')
const { sh } = erfordern('Aufgabendatei')

const PAGES = erfordern('./pages')

// vue-cli-service --mode-Wert const mode = process.env.MODE || 'prod'

// Modulname, kann mehrere sein const moduleNames = process.argv[2]

// Liste aller Seiten const pageList = Object.keys(PAGES)

// Wenn die gültige Modulliste nicht angegeben ist, wird die Liste aller Seiten verwendet. const validPageList = moduleNames ? moduleNames.split(',').filter((item) => pageList.includes(item)) : pageList
wenn (!validPageList.length) {
  console.log(chalk.red('**Modulname ist falsch**'))
  zurückkehren
}

console.log(chalk.blue(`Gültiges Modul:${validPageList.join(',')}`))

// Lösche das Verzeichnis „dist“ rimraf.sync('dist')

console.time('Gesamtkompilierungszeit')
const count = gültigeSeitenliste.Länge
lass Strom = 0
// Führe die Kompilierung der Module nacheinander aus for (let i = 0; i < validPageList.length; i += 1) {
  const Modulname = gültigeSeitenliste[i]
  process.env.MODULE_NAME = Modulname

  console.log(chalk.blue(`${moduleName}-Modul hat mit der Kompilierung begonnen`))

  // Kompilieren über vue-cli-service build sh(`vue-cli-service build --mode ${mode}`, { async: true }).then(() => {
    console.log(chalk.blue(`Kompilierung des Moduls ${moduleName} abgeschlossen`))
    konsole.log()
    Strom += 1
    wenn (aktuell === Anzahl) {
      console.log(chalk.blue('-----Alle Module kompiliert-----'))
      console.timeEnd('Gesamtkompilierungszeit')
    }
  })
}

// Module, die für die lokale Entwicklung kompiliert werden müssen module.exports = [

]

const Kreide = erforderlich('Kreide')

const devModuleList = erfordern('./build/dev-modules')

const isProduction = process.env.NODE_ENV === 'Produktion'

//Gesamtzahl der Seiten const PAGES = require('./build/pages')

für (const basename in PAGES) {
  wenn (Object.prototype.hasOwnProperty.call(PAGES, Basisname)) {
    PAGES[Basisname].chunks = [
      „Chunk-Ansicht“,
      'Chunk-Anbieter',
      'Chunk-Common',
      `${Basisname}`
    ]
  }
}

let Seiten = {}
const moduleName = prozess.umgebung.MODULE_NAME

wenn (istProduktion) {
  // Erstelle den Namen des Moduls if (!PAGES[moduleName]) {
    console.log(chalk.red('**Modulname ist falsch**'))
    zurückkehren
  }
  Seiten[Modulname] = SEITEN[Modulname]
} anders {
  // Lokales Entwicklungskompilierungsmodul // Alles kompilieren if (process.env.DEV_MODULE === 'all') {
    Seiten = SEITEN
  } anders {
    // Einige Module kompilieren const moduleList = [
      // Das kompilierte Modul „index“ wurde repariert.
      'Login',
      // Benutzerdefiniert kompilierte Module ... devModuleList
    ]
    moduleList.forEach(item => {
      Seiten[Element] = SEITEN[Element]
    })
  }
}

modul.exporte = {
  // Diese Codezeile ist sehr wichtig publicPath: isProduction ? './' : '/',
  Seiten,
  // Diese Codezeile ist sehr wichtig outputDir: isProduction ? `dist/${moduleName}` : 'dist',
  productionSourceMap: false,
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/variables.scss";'
      }
    }
  },
  chainWebpack: (Konfiguration) => {
    config.optimization.splitChunks({
      CacheGruppen:
        Ansicht: {
          Name: "Chunk-Vue",
          Test: /[\\/]Knotenmodule[\\/]_?(vue|vue-router|vuex|element-ui)(@.*)?[\\/]/,
          Priorität: -1,
          Brocken: ‚initial‘
        },
        Anbieter:
          Name: 'Chunk-Vendors',
          Test: /[\\/]node_modules[\\/]/,
          Priorität: -10,
          Brocken: ‚initial‘
        },
        gemeinsam:
          Name: "chunk-common",
          minChunks: 2,
          Priorität: -20,
          Stücke: "initial",
          reuseExistingChunk: true
        }
      }
    })
  }
}

{
  "Skripte": {
    "dienen": "vue-cli-service dienen",
    "serve:all": "umgebungsübergreifendes DEV_MODULE=alle Vue-CLI-Service-Serve",
    "build:test": "cross-env MODE=Testknotenbuild/index.js",
    "build:prod": "umgebungsübergreifender MODUS=prod-Knotenbuild/index.js",
    "lint": "Vue-CLI-Service-Lint",
  }
}