ホームページ > 記事 > ウェブフロントエンド > Angularプロジェクトのパスに指定したアクセスプレフィックスを追加する方法の詳細な説明
Angularプロジェクトのパスに指定したアクセスプレフィックスを追加する方法の詳細な説明
- 青灯夜游転載
- 2023-03-03 19:52:452137ブラウズ
Angular プロジェクトのパスにプレフィックスを追加するにはどうすればよいですか?以下の記事では、Angular プロジェクトのパスに指定したアクセスプレフィックスを追加する方法を紹介しますので、ご参考になれば幸いです。
複数のプロジェクトを開発する場合、指定されたプレフィックス パスを通じてさまざまなプロジェクトにアクセスしたいと考えています。たとえば、プロジェクト A にアクセスするにはプレフィックス /projectA/ を使用し、プロジェクト B にアクセスするにはプレフィックス /projectB/ を使用します。どのように設定すればよいでしょうか?
ここで使用されるフレームワークは
Angular,"@angular/core": "~12.1.0"
プロジェクト接頭辞の変更
追加する接頭辞が
/jimmy/
1 であるとします。ルーティング プレフィックス
を変更します。 app_BASE_HREF を app.module.ts ファイルに追加します:
import { APP_BASE_HREF } from '@angular/common';
@NgModule({
providers: [
{
provide: APP_BASE_HREF,
useValue: "/jimmy/"
}
]
})# # 2. パッケージ化されたファイルを変更します
この手順は必要ありません。名前をjimmy
に統一するだけです [関連チュートリアルの推奨事項:angularTutorial >>]
angular.json の出力ファイルを変更します:
{
"projects": {
...
{
"outputPath": "jimmy"
}
}
}
3. マウント ファイルを変更します。 href
デフォルトでは、マウントされたファイルindex.html は通常次のようになります:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jimmy</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="logo.png"> </head> <body> <app-root></app-root> </body> </html>我々は
は になります。ただし、マウント ファイルを手動で変更することはできません。ビルド後のファイルのみが変更されるため、この手順は package.json ファイルで完了できます。次のように --base-href=/jimmy/ を追加するだけです:
"scripts": {
"build": "ng build --base-href=/jimmy/"
}Runnpm run build パッケージ化後に取得されたフォルダーjimmy ##index.html ファイルの の下にある #base タグは当然変更されます。 これまで、アクセスされるプロジェクトのプレフィックスを変更しましたが、アクセスのためにサーバーにデプロイしたい場合はどうすればよいでしょうか?
ここでは、パッケージ化された
jimmy リソースをサーバーにアップロードし、nginx を動作として使用したと仮定します。 。
next.jsnginx.configです。お楽しみに
ここで、変更する必要があります
の server フィールド: <pre class="brush:js;toolbar:false;">server {
listen 80 default_server;
root /usr/share/nginx/fe/; // 打包的文件存放的位置
location /jimmy/ {
index index.html index.htm;
try_files $uri $uri/ /jimmy/index.html;
}
}</pre>
を実行して、構成を有効にします。プロジェクト jimmy には、http://domain.com/jimmy/index.html からアクセスできます。 プログラミング関連の知識について詳しくは、
以上がAngularプロジェクトのパスに指定したアクセスプレフィックスを追加する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。