序文プロジェクトのリリースでは、常に特定の状況に応じたパッケージ化が必要です。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 ステップ記録
次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...
以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...
1. フォントと文字表示の関係左側と右側の鋭角部分は Songti フォントで表示されます: &l...
方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...
<Head>タグに追加する<meta http-equiv="pragm...
目次1. ツールの紹介2. ワークフロー3. 操作インターフェースとパラメータ設定(1)監視と再起動...
1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...
この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...
@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...
目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...
Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...
DockerデーモンソケットDocker デーモンは、 unix 、 tcp 、 fdの 3 種類の...
目次最初のステップはMySQLをダウンロードすることですステップ2: ダウンロードした圧縮パッケージ...
質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...
目次2. 詳しい説明2.1. asyncRoutesルーティングを追加する2.2. 新しいpermi...