Vue-cliに基づくコードセットは複数のプロジェクトをサポートします

アプリケーションシナリオ

B2B ビジネスでは、顧客は同じ製品に対して多かれ少なかれカスタマイズを要求します。スキン、画像、いくつかの小さな機能の違いまで。
フロントエンドは常に最初に変更されます。変更が軽微な場合、ブランチをプルするとメンテナンス コストが増加します。ブランチをプルしすぎると、メイン トランクに問題がある場合、n 個のコピーをコピーするのと同じことになり、非常に面倒な作業になります。では、1 セットのコードで複数のプロジェクトをサポートすることは可能でしょうか?

少し前に、要件を受け取り、選択されたテクノロジは vue-cli を使用して構築された VUE でした。コード セットは 10 人以上の顧客をサポートする必要があります。各顧客のスキンと機能には若干の違いがありますが、主なプロセスはほぼ同じです。私たちはこのシナリオにおける解決策を検討しました。

アイデア

全体的な考え方はモジュール化であり、コンパイル中に入力コマンドに従ってさまざまなモジュールを直接組み立てて、必要なページをパッケージ化します。
ここでは 2 つの問題があります。

1. ページを分割してコンポーネントの粒度を制御するにはどうすればよいでしょうか?

2. 差分コンパイルを実行するにはどうすればいいですか?

プロジェクト構造

同じページでも共通部分と異なる部分が存在します。 Vue 自体のコンポーネント化の考え方により、ページをコンポーネントに分割し、共通部分を抽出して個別に処理することを考えやすくなります。

全体的なプロジェクト構造

• 建てる
  

ビルド構造には主にwebpackのスクリプト構成が含まれています

• 設定
  

設定ファイルは主にプロジェクト関連の設定です。ポートの競合がある場合に、リスニング ポート、パッケージ出力パス、名前付けを設定するためによく使用されます。

• ソース
  

ソースコードファイル。

• 資産

静的リソース。通常は画像、スタイルなど。

• 少ない

ここでは、スタイル ファイルがさまざまなテーマに分割されています。

• ページ

ページファイル

• ルーター

ルーティング

• ユーティリティ

ツール

• コンポーネント

フォルダーには各プロジェクトのコンポーネントが含まれています。コンポーネント ディレクトリにはパブリック コンポーネントが含まれています。

• 静的
  

静的リソースは webpack によってコンパイルされません。通常は外部参照ファイルを配置します。

webpack パッケージ構成

差分コンパイルするにはどうすればいいですか?

1.cross-envは環境変数を使用します。コンパイルフェーズでは、コンパイルのために渡された変数に従ってさまざまなコンポーネントがコンパイルされます。
まず、package.jsonファイルを変更する必要があります

「スクリプト」: {
 "dev:gx": "クロス環境 BRANCH_ENV=gx ノード build/dev-server.js",
 "build:gx": "クロス環境 BRANCH_ENV=gx ノード build/build.js"
 },

このとき、コンパイル時に、対応するコマンドを入力して、対応する環境変数を渡すことができます。
例: npm run dev:gx は BRANCH_ENV=gx を渡します。

2. この環境変数をconfig/prod.env.jsに挿入します。

モジュール.エクスポート = {
 NODE_ENV: '"production"'、
 API_PATH:'""',
 BRANCH_ENV: JSON.stringify(process.env.BRANCH_ENV) || '"base"',
 ignoreCsrfToken:'"false"'
}

3.webpack.base.conf.js

 解決する： {
 拡張子: ['', '.js', '.vue', '.json'],
 フォールバック: [path.join(__dirname, '../node_modules')],
 エイリアス: {
 'vue$': 'vue/dist/vue.common.js',
 'src': パスを解決します(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets/images/'+process.env.BRANCH_ENV),
 'コンポーネント': path.resolve(__dirname, '../src/components'),
 'componentsDif': path.resolve(__dirname, '../src/components/'+process.env.BRANCH_ENV),
 }
 },

エイリアスを導入する際に、コンパイル コマンドによって挿入された環境変数を使用していることがわかります。例えば、コンパイルコマンドが次のように入力したとします。

npm 実行ビルド:gx

現時点では

'assets': path.resolve(__dirname, '../src/assets/images/'+process.env.BRANCH_ENV)
// 'assets' と同等: path.resolve(__dirname, '../src/assets/images/gx')

ページ参照

1. 画像参照

<img class="icon-arrow" src="~assets/arrow.png">
//コンパイルコマンドに従って。画像参照は src/assets/images/gx/arrow.png です。

背景: url(~assets/btn_1.png) 繰り返しなし;

追記: エイリアスを使用するときは必ず ~ 記号を追加してください

2. コンポーネントリファレンス

//パブリック コンポーネント 'components/RuleTitle' から ruleTitle をインポートします
// 差別化コンポーネントの import ruleContent from 'componentsDif/RuleContent'

要約する

つまり、コアとなる考え方は、コンパイル コマンドに従って環境変数を渡し、環境変数とエイリアスの構成を使用してパッケージを区別することです。さらに難しいのは、コンポーネントの粒度をどのように制御するか、またコンポーネントをどのように分割するかであり、これはさまざまなニーズに応じてカスタマイズする必要があります。

上記は、複数のプロジェクトをサポートするための Vue-cli ベースのコード セットの詳細です。複数のプロジェクトをサポートするための Vue-cli ベースのコード セットの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。