angular前后端分离架构 springboot angular 前后端分离

前言

虽然前后端分离是现在主流的开发模式，但是我不认为前后端分离就意味着前后端部署，部署的时候也可以将前端打包后的资源文件放在jar包里，成为后端的一部分。

angular打包

首先使用angular-cli的打包命令去编译angular文件

ng build --configuration production

然后将输出的静态资源文件资源拷贝到spring boot中resources/static目录下。

接下来在resources/static目录下新建error文件夹，将index.html文件拷贝进去error文件夹，并重命名为404.html。这一步的目的是当angular项目使用h5路由, spring boot不能正确响应的问题。

如果你的angular项目是放在src/main/angular目录下，可以使用以下的脚本：

echo "build web application"

cd src/main/angular \
  && yarn \
  && ng build --configuration production --output-path ../resources/static \
  && cd ../../../

echo "copy web application to resources"

cd src/main/resources/static \
  && mkdir error \
  && cp index.html error/404.html \
  && cd ../../../../

spring boot

这个时候就可以打包spring boot代码。

对于maven：

mvn clean install package -Dmaven.test.skip=true

对于gradle：

gradle build -x test

demo

这是我写的demo