开发期间 Springboot 热重载 Angular 8

Question

我正在使用 Springboot 和 Angular 8 创建一个应用程序。我是 Springboot 的新手。我的计划是ng build在.mvn clean packagesrc/main/resources

问题是，如果我这样做，当前端发生一些更改时，我无法热重载。是否有构建此类应用程序的最佳实践？我的目的是将后端和前端打包在同一个jar文件中，但同时我需要直接在浏览器上查看字体中更改的文件。

另一方面，如果我（在开发期间）启动前端，ng serve那么由于跨源问题，它将无法工作。

Answer 1

在开发过程中，我强烈建议你不要将前端与后端（spring boot）捆绑在一起，这会让事情变得更加复杂并且更难以开发。据我所知，Spring Boot 中无法“热重新加载”静态资源中的文件。即使，您将如何首先重新编译您的角度项目？对于 mvn 包，这是在编译时完成的，而不是运行时完成的。

为了解决您的问题，我将执行以下操作：

• ng serve开发前端时使用
• 独立启动您的 Spring Boot 后端（没有捆绑的前端）

为了解决您提到的 CORS 问题，我将使用 Angular 提供的开箱即用的代理功能：

1. 将代理配置文件添加到serveangular.json 的部分：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "client:build",
    "proxyConfig": "proxy.conf.json"   <------- proxy config
  },
  "configurations": {
    "production": {
      "browserTarget": "client:build:production"
    }
  }
},

2. 然后，将代理配置添加到您的项目中：

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

您可能需要根据本地端口设置等更改配置。当您向 发出请求时http://localhost:4200/api/any/endpoint，它将被代理，http://localhost:8080/api/any/endpoint而不会违反浏览器的任何 CORS 规则。

然后，您的前端应该配置为向当前所在的域发出请求，或者您可以有一个不同的环境文件用于生产和开发，您可以在其中简单地更改 URL。