我想使用 Angular 更改 Laravel 的 api 的路由

Question

我使用 Angular 作为前端，使用 Laravel 的 api 作为后端。

当我在开发一个项目时，我必须将 laravel 的路由设置为 localhost:8000/api 才能进行 POST、GET 等操作

然后当我完成后，我必须将路由更改为主机页面 backend-folder/public/api 上的路由

我使用了一项服务，以便所有请求都具有相同的基本路由

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

@Injectable({
  providedIn: 'root',
})
export class PathService {
  constructor() {}

  DataBasePath() {
    return '/backend-folder/public/api';
    // return 'http://localhost:8000/api';
  }
}

问题是我在开发和部署时总是必须更改路径，有时我会忘记这样做，我必须使用 Angular 重新构建

有没有办法在我开发路径时它是 localhost:8000/api 而当我部署（ng build）时路径会更改为 backend-folder/public/api？

Answer 1

这就是 environment.ts 文件出现的地方。 在 Angular-Cli 项目中，我们得到包含两个文件的环境文件夹

• environment.ts

• environment.prod.ts

环境.ts

此文件导出一个常量 JSON 对象环境。如果您在 Angular 项目中引用环境对象属性，则在开发模式期间，即 ng serve 或 ng build 应从此文件中读取所有值。

environment.prod.ts

此文件导出相同的 JSON 对象，并且应具有与 environment.ts 文件相同的属性。在这种情况下，当您使用ng build --prod 为生产模式构建应用程序时，environment.ts 文件的所有值都将被environment.prod.ts 文件覆盖。

将开发HTTP Url放在environment.ts文件中

export const environment = {
  production: false,
  baseUrl: 'http://localhost:8000/api'  
};

将生产 HTTP URL 放入 environment.prod.ts 文件中

export const environment = {
  production: true,
  baseUrl: '/backend-folder/public/api'
};

在 Angular 应用程序的其余部分，请参阅 environment.baseUrl

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';
@Injectable({
  providedIn: 'root',
})
export class PathService {
  baseUrl = environment.baseUrl;
  constructor() {}

  DataBasePath() {
   let url = this.baseUrl + '/users/1';
   return this.httpClient.get<JSON>(url);
  }
}

在开发模式下，run ng serve or ng build 命令。 baseUrl 应像开发 URL 一样读取值：http://localhost:8000/api 对于生产模式，run ng build --prod 命令。 baseUrl 应像生产 URL 一样读取值：/backend-folder/public/api