背景

由于现在普遍的前后端分离开发 【前端vuejs 后端springboot】那么存在如下工程化问题：

1. 目前SpringBoot采用fatjar的形式发布
2. Vue通过nodejs运行
3. 发布时Vue打包出来的结果没有后端支持将无法访问

存在如下的方案

1. 开发时将前后端项目联合开发，前端代码存在后端的子目录下【不建议】
2. 开发时vue使用vue-cli的纯粹前端方案 部署时将生成的代码copy到后端项目中
    

方案

我们建议采用方案2，但是部署时不建议copy【不利于工程化的实践】

我们采用如下方式进行工程化的实践。【将vue代码copy到static文件夹下同样道理】

1. 我们定义vue访问时采用固定前缀【比如ui】
2. 访问ui目录时通过SpringBoot后端重定向到指定目录文件【更好的方案在生产上建议使用cdn或者nginx】
3. 我们考虑增加SpringBoot的Resourcehandler

代码

定义对应映射关系

resource.resource-handler-list[0].pattern=/ui/** resource.resource-handler-list[0].location=file:/Users/qixiaobo/Downloads/

定义具体对应类

/**  * @author qixiaobo  */ public class ResourceHandler {     private String pattern;     private String location;       public String getPattern() {         return pattern;     }       public void setPattern(String pattern) {         this.pattern = pattern;     }       public String getLocation() {         return location;     }       public void setLocation(String location) {         this.location = location;     } }

定义配置文件

/**  * @author qixiaobo  */ @ConfigurationProperties(prefix = "resource", ignoreUnknownFields = true) public class ResourceHandlerConfig {     private List<ResourceHandler> resourceHandlerList;       public List<ResourceHandler> getResourceHandlerList() {         return resourceHandlerList;     }       public void setResourceHandlerList(List<ResourceHandler> resourceHandlerList) {         this.resourceHandlerList = resourceHandlerList;     } }

@Override public void addResourceHandlers(ResourceHandlerRegistry registry) {     registry.addResourceHandler("swagger-ui.html")             .addResourceLocations("classpath:/META-INF/resources/");       registry.addResourceHandler("/webjars/**")             .addResourceLocations("classpath:/META-INF/resources/webjars/");     List<ResourceHandler> resourceHandlerList = resourceHandlerConfig().getResourceHandlerList();     for (ResourceHandler resourceHandler : resourceHandlerList) {         registry.addResourceHandler(resourceHandler.getPattern())                 .addResourceLocations(resourceHandler.getLocation());     }   }   @Bean public ResourceHandlerConfig resourceHandlerConfig() {     return new ResourceHandlerConfig(); }

如上我们就完成了映射关系

这样就能访问到指定的文件