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

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

ページディレクトリ構造

デフォルトの HTML テンプレート ファイル public/index.html をルート ディレクトリに移動する必要があることに注意してください。

依存関係をインストールする

npm i --save-dev クロス環境タスクファイル

ビルド/pages.js

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 = ページ

ビルド/index.js

ビルド コマンドを実行し、vue-cli-service ビルドをループします。

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('合計コンパイル時間')
    }
  })
}

ビルド/dev-modules.js

ローカル開発用にコンパイルする必要があるモジュールをカスタマイズします。モジュール名は、src/pages の下のフォルダー名です。

// ローカル開発用にコンパイルする必要があるモジュール 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
        }
      }
    })
  }
}

パッケージ.json

{
  「スクリプト」: {
    "サーブ": "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",
  }
}

地域開発

ローカルで開発する場合、npm run serve はカスタム モジュール ディレクトリをコンパイルし、npm run serve:all はすべてのモジュール ディレクトリをコンパイルします。

ローカル開発中にコンパイルした後のディレクトリ構造は次のようになります。

したがって、起動後にアドレスを http://localhost:8080/index/index.html に変更する必要があります。

パッケージング結果

ビルド時に、 npm run build:prodすべてのページをパッケージ化し、 npm run build:prod indexインデックス ページのみをパッケージ化します。

パッケージ化されたディレクトリ構造は次のとおりです。

このように、異なるモジュール間をジャンプするときに、一貫した相対パスジャンプ方法 ../index/index.html を使用できます。

パッケージ化後、各モジュールの内容は個別のディレクトリにパッケージ化されます。

Githubアドレス

要約する

Vue-CLI マルチページ ディレクトリ パッケージングに関するこの記事はこれで終わりです。Vue-CLI マルチページ ディレクトリ パッケージングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-cli 3 構成パッケージの最適化ポイントについて(推奨)
  • vue-cli3 マルチ環境パッケージ構成の詳細な説明
  • vue-cli スキャフォールディングパッケージ化後にベンダーファイルが大きくなりすぎる問題を解決します
  • HBuilderx を使用して vue-cli でアプリをパッケージ化する際の問題
  • Electron を使用して vue-cli プロジェクトを exe にパッケージ化する方法
  • vue-cli のパッケージ化されたイメージ パスのエラーの解決方法
  • vue-cli をパッケージ化して起動する方法の例
  • vue-cli3 環境変数と環境パッケージの例

<<:  MySQLデータベースの増分バックアップのアイデアと方法

>>:  MySQL スロークエリログの設定と使用方法のチュートリアル

推薦する

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

MySQL 5.7 インストール不要の設定グラフィックチュートリアル

Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...

el-tree での不完全なテキスト表示の解決策

目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...

MySQLの重複排除方法

MySQLの重複排除方法【初級】繰り返しのセリフが少ないdistinctive を使用してそれらを見...

MySQL 5.7.13 のインストールと設定方法のグラフィック チュートリアル (win10 64 ビット)

この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

Momentsで写真を整理するためのCSSコード

まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...

MySQL カーソル関数と使用法

目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...

Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...

CentOS 7にChromeブラウザをインストールする方法

この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...

あまり一般的ではないが便利な CSS 属性操作の完全ガイド

1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...

JSフロントエンドモジュール化のいくつかの仕様についての簡単な説明

目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...

MySQL 日付処理関数の例の分析

この記事は主にMySQLの日付処理関数のサンプル分析を紹介します。この記事ではサンプルコードを詳細に...

モバイルウェブサイトの開発に関するいくつかの結論

ウェブサイトのモバイル版には、少なくともいくつかの基本機能が必要です。 1. ページの適用性の問題:...

CSS で子 div の高さを親コンテナの残りのスペースに合わせる方法

1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...