vue.config.js一般的な構成

CONSTパス=必要とする（ 'パス' ）
constのグロブ =（ 'グロブ'を必要）
constの決意 =（DIR）=> path.join（__ dirnameは、DIR）
constのPAGES_PATH =」./src/pages/*/*.js'

module.exportsは = {
  //   publicPath： '/テスト/'、//設定されたアプリケーションパッケージを展開するためのベースURL 
  publicPath :? process.env.NODE_ENV === '生産' '/試験/'： './'、 // の開発環境と本番環境の区別
  // outputDirの：ビルドビルドファイルを実行するときに「testbuildが」、//ディレクトリが作成、デフォルトの「distの」
  // assetsDir：「資産」の後、//ビルドが生成された静的リソースの配置ディレクトリ、デフォルトの「」
  // indexPath：「テスト/ home.html」、// index.htmlを後に生成されたパス構築
  // filenameHashingを：trueに、//デフォルトのハッシュ値の後に生成されたビルドの静的リソースを追加制御静的リソースキャッシュのデフォルト設定にtrueに
  // {：ページ
  //    インデックス：{ 
  //      エントリ： 'SRC /ページ/インデックス/ main.js'、//ページ入口
  //      テンプレート：」公共/インデックス。HTML」、//ファイル内の公共
  //     ファイル名：「index.htmlを」、//パスと名前の後に生成されたビルドファイル
  //      タイトル：「ページインデックス」、
  //      チャンクのは、以下のとおりです。[「チャンク・ベンダー」、「チャンク-共通」、「インデックス」] 
  //    }、
  //    PAGE1：{ 
  //      エントリ： 'SRC /ページ/ PAGE1 / main.js'、//ページ入口
  //      テンプレート： '公共/ page1.html'、//パブリックのドキュメント内の
  //      ファイル名を」 page1.html「その後、生成されたパスとファイル名//ビルド
  @      タイトル：」PAGE1」、//するラベルのニーズに//テンプレートこの時、タイトルを使用<タイトル> <％= htmlWebpackPlugin.options.title ％> </タイトル> 
  //      チャンクのです：[「チャンク・ベンダー」、「チャンク・コモン」、「PAGE1」] //ジェネリックチャンクとチャンクベンダー抽出
  //    } 
  //    PAGE2：{ 
  //     エントリ： 'SRC /ページ/ページ2 / main.js'、//ページのエントリ
  //      テンプレート： '公共/ page2.html'、
  //      ファイル名： 'page2.html'、//ファイルを作成し、パス名を生成した後、
  //      タイトル： 'ページインデックス'、
  //      チャンクのされています[ 'チャンク・ベンダー'、 'チャンク-共通'、 'PAGE2'] 
  //    } 
  // }、
  ページ数：setPages（）、
  productionSourceMap：偽、// あなたがいないソースマップ生産環境をすれば、それが構築され、運用環境スピードアップするためにfalseに設定することができる
  // devserver：{ 
  //    ポート：「1111」、
  //    //プロキシ：「HTTP：/ / localhostを：8080「// HTTPに（静的ファイルの要求に一致するものがありません）開発サーバーが未知のを要求するプロキシを伝える：// localhost：8080にアクセスします。
  //    プロキシ：{ 
  //      '/ API'：{ 
  //        クロスドメイン//ドメイン名でアクセスしたい
  //        ターゲット： 'HTTP：// localhostを：8080'、
  //        WS：trueに、// WebSocketをイネーブルするかどうか
  / /        セキュア：偽、// httpプロトコルがfalseに設定されている使用し、HTTPSプロトコルがtrueに設定されている
  //        changOrigin：trueに、//プロキシを有効：ローカルの仮想サーバーを作成し、要求されたデータを送信し、相互作用データのクライアント側とサービス側がクロスドメインの問題を持っていないので、要求されたデータを受信している間
  //       pathRewrite：{ 
  //            '^ / API'： '' 
  //        } 
  //      } 
  //    } 
  // }、 
  chainWebpack：設定=> {
     / * 自動インポート公開ファイル* / 
    constの種類 = [ 'VUE-モジュール' 「VUE」、「ノーマル・モジュール」、「ノーマル」]
    types.forEach（
      タイプ => addStyleResource（config.module.rule（ 'SCSS' ）.oneOf（タイプ））
    ）

    / * エイリアスを追加します* /
    config.resolve.alias
      .SET（ '@title'、決意（ 'SRC /資産/ commonPublic / title.vue' ））
  }
}

/ * *
 *公共スタイルの注射
 * @paramルール
 * / 
関数addStyleResource（ルール）{
  rule.use（「スタイルリソース」）
    .loader（「スタイル・リソース・ローダー」）
    .OPTIONS（{
      パターン：[
        path.resolve（__ dirnameは、 'SRC /資産/ common.scss'）// 解決（）、絶対パス名を返します
      ]
    }）
}

/ * *
 *マルチページジャンプ
 * / 
関数setPages（）{
  せページ = {}
  glob.sync（PAGES_PATH）.forEach（ファイルパス => {
    聞かせてのfileList = filepath.split（ '/' ）
    fileNameにしましょう =のfileList [ - 2 fileList.length ]

    ページ[ファイル名] = {
      エントリー：ファイルパス、
      テンプレート： `パブリック / $ {fileNameに} .html`、// '公開/ index.htmlを'
      ファイル名： `$ {fileNameに} .html`、
      // タイトル： 
      チャンク：[ 'チャンク・ベンダー'、 'チャンク-共通の' ファイル名]
    }
  }）
  リターンページ
}
次のようにdistのディレクトリとファイルのマルチページ構成の生成されたファイルのディレクトリに対応する次のとおりです。
おすすめ
