springboot项目集成angular服务的配置运用_springboot显示angular页面

1.环境安装：maven，jdk1.8，nodejs，npm，angular-cli

2.新建springboot项目，新建angular服务项目

3.springboot项目的pom.xml配置：

 <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <!-- Frontend插件版本,用于集成angular服务 -->
    <plugin.frontend.version>0.0.27</plugin.frontend.version>
    <!-- node插件版本,用于集成angular服务 -->
    <system.node.version>v8.11.3</system.node.version>
    <!-- npm插件版本,用于集成angular服务 -->
    <system.npm.version>5.6.0</system.npm.version>
  </properties>
 
  <!-- springboot 静态资源访问 -->
  <dependencies>
	<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  </dependencies>
 
  <build>
    <finalName>xxx</finalName>
    <sourceDirectory>src/main/java</sourceDirectory> 
    <resources> 
      <resource> 
        <directory>src/main/resources</directory> 
      </resource>  
    </resources>  
    <testResources> 
      <testResource> 
        <directory>src/test/resources</directory> 
      </testResource> 
    </testResources>  
    
    <plugins>
      <!-- springboot maven插件  项目以maven方式进行打包jar/war -->
      <plugin>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-maven-plugin</artifactId>
		<executions>
			<execution>
				<goals>
				    <!-- 默认打包参数,在mvn package之后,再次打包可执行的jar/war -->
					<goal>repackage</goal>
				</goals>
			</execution>
		</executions>
	  </plugin>
	  <!-- 配置Frontend插件，支持前后端结合 -->
      <plugin>
          <groupId>com.github.eirslett</groupId>
          <artifactId>frontend-maven-plugin</artifactId>
          <version>${plugin.frontend.version}</version>
          <configuration>
              <!-- angular 源码根目录 -->
              <workingDirectory>src/main/angular</workingDirectory>
              <!-- node 国内镜像下载地址 -->
              <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
              <!-- node 版本 -->
              <nodeVersion>${system.node.version}</nodeVersion>
              <!-- npm 版本 -->
              <npmVersion>${system.npm.version}</npmVersion>
              <!-- 代码安装目录 -->
              <installDirectory>target</installDirectory>
          </configuration>
          <executions>
              <!-- 安装 node 和 npm -->
              <execution>
                  <id>install node and npm</id>
                  <goals>
                      <goal>install-node-and-npm</goal>
                  </goals>
                  <phase>generate-resources</phase>
              </execution>
              <!-- 安装angular项目依赖  -->
              <execution>
                  <id>npm install</id>
                  <goals>
                      <goal>npm</goal>
                  </goals>
                  <configuration>
                      <arguments>install</arguments>
                      <installDirectory>target</installDirectory>
                  </configuration>
              </execution>
              <!-- 编译angular源码 -->
              <execution>
                  <id>angular cli build</id>
                  <goals>
                      <goal>npm</goal>
                  </goals>
                  <phase>generate-resources</phase>
                  <configuration>
                      <arguments>run build</arguments>
                  </configuration>
              </execution>
          </executions>
      </plugin>
    </plugins>
  </build>

4.springboot项目写个类加载默认访问页面及静态资源加载路径：

@Configuration
@EnableWebMvc
public class EAIDefultView extends WebMvcConfigurerAdapter {
	
	private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
            "classpath:/META-INF/resources/", "classpath:/resources/",
            "classpath:/static/", "classpath:/public/" };
 
	/**
	 * 默认根路径访问页面
	 */
	@Override
	public void addViewControllers(ViewControllerRegistry registry) {
		registry.addViewController("/").setViewName("redirect:/index.html");
		registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
		super.addViewControllers(registry);
	}
	
	/**
	 * 静态资源路径
	 */
	@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
		if (!registry.hasMappingForPattern("/**")) {
            registry.addResourceHandler("/**").addResourceLocations(
                    CLASSPATH_RESOURCE_LOCATIONS);
        }
    }
	
}

5.将angular项目拷贝至src/main目录下面

6.配置angular项目下的angular.json的输出目录至resources/static

7.配置angular项目下的package.json的bulid命令加上base href为 ./ ，避免出现html文件引用相对路径错误

8.springboot项目下运行clean package可以进行打包

9.springboot项目下运行spring-boot:run可以访问angular项目的index.html页面