SpringBoot集成Angular应用打包部署_angular 打包war

1 Angular项目打包步骤
1.1 修改路由策略，改为Hash路由
1.2 修改httpService类中的url根路径为.或./

1.3 打包

指令1：ng build --prod
使用指令1进行打包，需要将index.html里面 <base href="/"> 改为 <base href="./">。
1
2

指令2：ng build --prod --base-href ./
使用指令2进行打包，会在打包完成之后自动将index.html里面 <base href="/"> 改为 <base href="./">。
1
2

打包指令执行完毕后，会在项目目录中生成一个dist文件夹，里面就是打包的文件。

打包注意：

项目中所有访问assets里面的静态文件直接assets/picture.png进行访问。
例如：<img src="assets/picture.png">
1
2

../../assets/picture.png方式访问路径打包之后找不到路径。
例如：<img src="../../assets/picture.png">
1
2

2 SpringBoot集成Angular应用
2.1 在SpringBoot项目resources目录下创建static目录，并将Angular打包之后的文件复制其中。

2.2 在pom.xml设置打包类型

<packaging>war</packaging>
<packaging>jar</packaging>
1
2

2.3 使用IDEA Maven管理工具进行清除缓存和打包操作。

4 部署
4.1 war包部署直接将war包复制到tomcat的webapps目录下即可。
注意：需要移除Spring Boot内置tomcat，详细见：SpringBoot 取消内置Tomcat启动，改用外接Tomcat

4.2 jar包部署直接使用指令 java -jar jar包名称 运行即可。