通过Springboot工程部署vue项目

一般vue工程会单独部署到nginx服务器上，但是也有些会跟后端服务一起打包部署，这里简单介绍一种方法。

首先在已有的项目中添加静态资源映射：

@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {

    @Autowired
    private ConfigProperties configProperties;

    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/");
        super.addResourceHandlers(registry);
    }
}

然后再resources目录创建static目录，将vue打包后的dist目录下的所有文件copy到static下即可。

启动项目访问：http://ip:port/static/index.html

当然这么做有一点不方便，前端修改代码后端也需要重新打包，所以我们可以映射到项目外

@Configuration
public class MvcConfig extends WebMvcConfigurationSupport {

    @Autowired
    private ConfigProperties configProperties;

    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/");
        registry.addResourceHandler(configProperties.getPath()).addResourceLocations("file:" + configProperties.getResourceLocations());
        super.addResourceHandlers(registry);
    }
}

我们将资源路径做成可配置：

@Configuration
@ConfigurationProperties(prefix = "view")
@Data
public class ConfigProperties {

    private String path;

    private String resourceLocations;

}

配置文件：

server:
  port: 8080
spring:
  application:
    name: test
  profiles:
    active: dev
view:
  path: /demo/**
  # D:/work/dist/
  resourceLocations: D:/work/dist/

这样就实现可配置部署vue工程，将vue打包好的dist目录路径配置到resourceLocations，访问路径配置到path

按照上面配置，启动项目访问：http://ip:port/demo/index.html