ページディレクトリ構造デフォルトの HTML テンプレート ファイル public/index.html をルート ディレクトリに移動する必要があることに注意してください。 依存関係をインストールする
ビルド/pages.jsVue 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 に変更する必要があります。 パッケージング結果ビルド時に、 パッケージ化されたディレクトリ構造は次のとおりです。 このように、異なるモジュール間をジャンプするときに、一貫した相対パスジャンプ方法 ../index/index.html を使用できます。 パッケージ化後、各モジュールの内容は個別のディレクトリにパッケージ化されます。 Githubアドレス 要約するVue-CLI マルチページ ディレクトリ パッケージングに関するこの記事はこれで終わりです。Vue-CLI マルチページ ディレクトリ パッケージングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLデータベースの増分バックアップのアイデアと方法
>>: MySQL スロークエリログの設定と使用方法のチュートリアル
VMware ワークステーションの仮想マシンの互換性の問題を解決するにはどうすればよいですか?ノート...
この記事の例では、要素のマウスドラッグ効果を実現するためのvue+tsの具体的なコードを参考までに共...
この記事では、例を使用して、MySQL ビューの一貫性を確保する方法 (チェック オプションを使用)...
1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...
導入yum (Yellow dog Updater, Modified) は、Fedora、RedH...
無料ポイントインタビュアー:Linuxを使ったことはありますか?私:はいインタビュアー:メモリ使用量...
目次NULLとは何か2種類のNULLなぜ「= NULL」ではなく「IS NULL」と書く必要があるの...
目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...
目次1. フックとは何ですか? 2. フックはなぜ現れるのでしょうか? 3. よく使われるフックは何...
私が初めてdockerを使用したときは、dockerfileやdocker-composeを使用して...
1. ボックスを中央に配置するいくつかの方法を記録します。 1.0、マージン幅固定、高さ中央配置。 ...
目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...
1.html <div class="ログインボディ"> <...
【1】<i></i>タグと<em></em>タグ同じ...
この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...