序文プロジェクトのリリースでは、常に特定の状況に応じたパッケージ化が必要です。Angular CLI は、便利なパッケージ化ツール「ng build」を提供します。リリース パスにはいくつかの構成があり、ここではそれらをまとめます。 ベース hrefプロジェクト ビルドのディレクトリ構造を指定します。たとえば、「deploy-test」に設定すると、最終的なパッケージ結果は dist/deploy-test ディレクトリに保存されます。 プロジェクトが作成されると、index.html のデフォルト設定は <base href="/" rel="external nofollow" > になります。これは、アプリケーションがルート ディレクトリを基準にして実行されることを意味します。このとき、ページの相対パスはこの設定に基づきます。たとえば、 の実際のアクセス パスは /image/test.png になります。 リソース要求パスは変更されません。 <本文> <アプリルート></アプリルート> <script src="runtime.js"></script> <script src="polyfill.js"></script> <script src="styles.js"></script> <script src="main.js"></script> </本文> ただし、プロジェクトはサブディレクトリで実行されることが多く、たとえば、Tomcat の Web アプリケーションの下に新しい「deploy-test」プロジェクト ディレクトリを作成します。したがって、base-href も「/deploy-test/」に設定する必要があります。 ここではスラッシュ (/) が重要であることに注意してください。サーバーのサブディレクトリの名前が「test」であると仮定すると、パッケージ化と展開は次のようになります。
パッケージ化時に base-href を変更する主な方法は 3 つあります。
"建築家": { "建てる": { "ビルダー": "@angular-devkit/build-angular:browser", 「オプション」: { "baseHref": "/kanpm/", } } } つまり、baseHref はアプリケーションのデプロイメント パスを構成するために使用されます。 デプロイURLリソースとアプリケーションが同じサーバー ディレクトリに配置されている場合は、baseHref で十分ですが、リソースとアプリケーションが異なる場所にある場合はどうなるでしょうか? deploy-url を設定すると、パッケージ化時にリソース要求パスが変更されます。たとえば、--deploy-url=/app/resource/ の場合、最終的にパッケージ化された index.html は次のようになります。 <本文> <アプリルート></アプリルート> <script src="/app/resource/runtime.js"></script> <script src="/app/resource/polyfill.js"></script> <script src="/app/resource/styles.js"></script> <script src="/app/resource/main.js"></script> </本文> 例えば、画像  がある場合、パッケージ化後のパスは "/app/resource/test.png" になります。 同様に、angular.jsonまたはコマンドラインでも設定できます。 "建築家": { "建てる": { "ビルダー": "@angular-devkit/build-angular:browser", 「オプション」: { "デプロイURL": "/test/", } } } または ng build --deploy-url="/test/" ✨注意: deploy-url はパッケージ化されたリソース ファイルのみを変更できます。 スタイルリソースのインポートbase-href を設定すると、スタイルシートにインポートされたリソース パスの動作は、CLI バージョンによって異なります。
baseHref は、Angular アプリケーションの相対パスを制御するランタイム値であるためです。コンパイル時にパッケージ化の動作を処理するために使用しないでください。パッケージ化の依存関係管理では、webpack は相対パスを通じてそれを識別する必要があります。これは、リソースの追加処理 (リソース ファイル名にハッシュ値を追加してキャッシュされないようにするなど) にも便利です。 ✨注: パッケージ化の際、パッケージ化する必要のあるリソースは webpack によってコピーされ、dist ルート ディレクトリに配置されます (assets フォルダーにも元のコピーがあります)。したがって、CLI がプロジェクトを作成するときに angular.json のデフォルト構成が次のようになるため、スタイルまたはコンポーネントで導入されたファイルは、assets ディレクトリの外部に配置する必要があります。 "建築家": { "建てる": { ... 「オプション」: { 「資産」: [ "src/favicon.ico", 「src/アセット」、 ]、 } } ご覧の通り、デフォルト設定では、assets フォルダ内のすべてのファイルがパッケージ化されずに dist フォルダに直接コピーされます (個人的には Nuxt のディレクトリ名は statics フォルダと呼ぶ方が適切だと思います)。コンポーネントにインポートする必要があるファイルや、スタイル ファイルに相対パスで導入する必要があるファイルは、別のフォルダーに配置できます。パッケージ化後にファイルが重複しないように、angular.jsn でそれらを構成する必要はありません。 要約するこれらをまとめて要約してみましょう。
コンパイルされパッケージ化された dist/kanpm フォルダーを取得した後、パッケージ化されコンパイルされたすべてのファイルをサーバーの kanpm/resource ディレクトリに配置し、index.html とその他の直接コピーされた静的ファイルをサーバーの kanpm/ディレクトリに配置します。 host:port/kanpm をリクエストすると、プロジェクトが正常に実行されていることがわかります。 このことから、base-href はアプリケーションの展開場所、つまりユーザーが Web サイトにアクセスできるパスを決定することがわかります。 deploy-url は、パッケージ化されたリソース ファイル (画像、フォント、js など) がデプロイされる場所を決定します。上記の例のようにアプリケーションのサブディレクトリ内、または CDN サーバー内に配置できます。 Angular CLI リリース パスの設定項目に関するこの記事はこれで終わりです。Angular CLI リリース パスの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: Centos6.9 インストール Mysql5.7.18 ステップ記録
初め:コードをコピーコードは次のとおりです。 <input type="text&q...
目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...
開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...
目次初期作成方法ファクトリーパターンコンストラクターパターンコンストラクタパターンの最適化プロトタイ...
この記事の例では、フロントエンドのページング効果を実現するためのJSの具体的なコードを参考までに共有...
この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...
目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...
この記事では、宝くじターンテーブルを描画するJS + Canvasの具体的なコードを参考までに共有し...
HTMLタグのリストマークタイプ名前または意味効果述べるファイルのタグ付け<HTML> ...
導入前回の記事では、axios のシンプルなカプセル化と、axios インターセプターの適用シナリオ...
一般的な書き方は次のとおりです。 XML/HTML コードコンテンツをクリップボードにコピー<...
この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...
VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...
runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...
目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...