ページディレクトリ構造デフォルトの 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 スロークエリログの設定と使用方法のチュートリアル
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...
目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...
MySQLの重複排除方法【初級】繰り返しのセリフが少ないdistinctive を使用してそれらを見...
この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...
目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...
まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...
目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...
厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...
この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...
1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...
目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...
この記事は主にMySQLの日付処理関数のサンプル分析を紹介します。この記事ではサンプルコードを詳細に...
ウェブサイトのモバイル版には、少なくともいくつかの基本機能が必要です。 1. ページの適用性の問題:...
1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...