Vue-CLI マルチページディレクトリパッケージ化手順の記録

定数パス = require('path')
const glob = require('glob')
定数 fs = require('fs')

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

// 異なるモジュールのページタイトルをカスタマイズする
const タイトルマップ = {
  インデックス: 'ホーム'
}

関数 getPages (globPath) {
  定数ページ = {}
  glob.sync(globPath).forEach((item) => {
    定数統計 = fs.statSync(アイテム)
    （stats.isDirectory()）の場合{
      定数 basename = path.basename(item, path.extname(item))

      // モジュールディレクトリに index.html がある場合は、そのファイルを HTML テンプレートファイルとして使用します。const template = fs.existsSync(`${item}/index.html`)
        ? `${item}/index.html`
        : path.join(__dirname, '../index.html')

      pages[ベース名] = {
        エントリ: `${item}/main.js`、
        タイトル: titleMap[basename] || 'デフォルトページ',
        テンプレート、
        // このコード行は非常に重要です // 開発と本番で互換性があります。HTML ページ階層は一貫しています filename: isProduction ? 'index.html' : `${basename}/index.html`
      }
    }
  })
  ページを返す
}

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

module.exports = ページ

const チョーク = require('チョーク')
const rimraf = require('rimraf')
const { sh } = require('tasksfile')

const PAGES = require('./pages')

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

// モジュール名（複数可） const moduleNames = process.argv[2]

// すべてのページのリスト const pageList = Object.keys(PAGES)

// 有効なモジュールリストが指定されていない場合は、すべてのページのリストになります const validPageList = moduleNames ? moduleNames.split(',').filter((item) => pageList.includes(item)) : pageList
ページリストの長さが正しい場合
  console.log(chalk.red('**モジュール名が正しくありません**'))
  戻る
}

console.log(chalk.blue(`有効なモジュール:${validPageList.join(',')}`))

// distディレクトリを削除する rimraf.sync('dist')

console.time('合計コンパイル時間')
定数 count = 有効なページリスト.長さ
電流を0にする
// モジュールのコンパイルを1つずつ実行します for (let i = 0; i < validPageList.length; i += 1) {
  定数モジュール名 = 有効なページリスト[i]
  process.env.MODULE_NAME = モジュール名

  console.log(chalk.blue(`${moduleName} モジュールのコンパイルを開始しました`))

  // vue-cli-service build でコンパイル sh(`vue-cli-service build --mode ${mode}`, { async: true }).then(() => {
    console.log(chalk.blue(`${moduleName} モジュールのコンパイルが完了しました`))
    コンソールログ()
    現在の += 1
    if (現在のカウント === ) {
      console.log(chalk.blue('-----すべてのモジュールがコンパイルされました-----'))
      console.timeEnd('合計コンパイル時間')
    }
  })
}

// ローカル開発用にコンパイルする必要があるモジュール module.exports = [

]

const チョーク = require('チョーク')

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

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

// 合計ページ数 const PAGES = require('./build/pages')

(const ベース名 in PAGES) {
  if (Object.prototype.hasOwnProperty.call(PAGES, ベース名)) {
    PAGES[ベース名].chunks = [
      「チャンクビュー」、
      「チャンクベンダー」
      「チャンクコモン」、
      `${ベース名}`
    ]
  }
}

ページを {} にします
定数 moduleName = process.env.MODULE_NAME

if (isProduction) {
  // モジュールの名前を構築します if (!PAGES[moduleName]) {
    console.log(chalk.red('**モジュール名が正しくありません**'))
    戻る
  }
  pages[モジュール名] = PAGES[モジュール名]
} それ以外 {
  // ローカル開発コンパイル済みモジュール // すべてをコンパイル if (process.env.DEV_MODULE === 'all') {
    ページ = ページ
  } それ以外 {
    // いくつかのモジュールをコンパイルする const moduleList = [
      // コンパイルされたモジュール 'index' を修正しました。
      'ログイン'、
      // カスタムコンパイルされたモジュール...devModuleList
    ]
    モジュールリスト.forEach(item => {
      pages[item] = ページ[item]
    })
  }
}

モジュール.エクスポート = {
  // このコード行は非常に重要です publicPath: isProduction ? './' : '/',
  ページ、
  // このコード行は非常に重要です outputDir: isProduction ? `dist/${moduleName}` : 'dist',
  プロダクションソースマップ: false、
  css: {
    ローダーオプション: {
      サス: {
        prependData: '@import "~@/styles/variables.scss";'
      }
    }
  },
  チェーンWebpack: (config) => {
    config.optimization.splitChunks({
      キャッシュグループ:
        ビュー: {
          名前: 'chunk-vue'、
          テスト: /[\\/]node_modules[\\/]_?(vue|vue-router|vuex|element-ui)(@.*)?​​[\\/]/,
          優先度: -1、
          チャンク: '初期'
        },
        ベンダー:
          名前: 'チャンクベンダー'、
          テスト: /[\\/]node_modules[\\/]/,
          優先度: -10、
          チャンク: '初期'
        },
        一般：
          名前: 'チャンク共通'、
          最小チャンク数: 2,
          優先度: -20、
          チャンク: 'initial'、
          既存のチャンクを再利用: true
        }
      }
    })
  }
}

{
  「スクリプト」: {
    "サーブ": "vue-cli-service サーブ",
    "serve:all": "クロス環境 DEV_MODULE=all vue-cli-service serve",
    "build:test": "クロス環境 MODE=test node build/index.js",
    "build:prod": "クロス環境 MODE=prod node build/index.js",
    "lint": "vue-cli-service lint",
  }
}