Angular多環境打包專案併發布到nginx執行

天天向上518發表於2024-11-30
AngularNginx

1:官網下載穩定版本Nginx 1.26.0

2：先跑起來看是否異常，如果沒有跑起來我們可以檢查分析nginx的log日誌

3：專案路徑如下：

4：前端多環境簡單測試配置

5：路由配置簡單測試資料

const routes: Routes = [

  { path: '', redirectTo: '/home', pathMatch: "full" },

  {
    path: "home", component: HomeComponent,
    children: [
      { path: "top", component: TopComponent },
      {
        path: "menu", component: MenuComponent,
        children: [
          { path: "body", component: BodyComponent },
        ]
      },
      { path: "product", component: ProductComponent },
    ]
  },

  { path: "**", redirectTo: "menu" }
];

6：服務code如下，或者在元件中使用

import { Injectable } from '@angular/core';

import { environment } from '../../environments/environment';
@Injectable({
  providedIn: 'root'
})
export class MyenviromentService {
  constructor() {}

   getEnviromentApiurlData(){
     return environment.apiUrl;
   }
}

7：不同環境配置code

8:在一個元件中使用列印顯示出當前的環境引數

9：測試結果截圖

10：小結：操作步驟原理就是：ngin跑起來先，配置好不同環境的介面閘道器引數等，然後就是在頁面上顯示出來，方便自己檢視環境配置是否ok，最後將打包好的前端code給到nginx執行即可

相關文章