背景

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

目前SpringBoot采用fatjar的形式发布

Vue通过nodejs运行

发布时Vue打包出来的结果没有后端支持将无法访问

存在如下的方案

开发时将前后端项目联合开发，前端代码存在后端的子目录下【不建议】

开发时vue使用vue-cli的纯粹前端方案部署时将生成的代码copy到后端项目中

方案

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

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

我们定义vue访问时采用固定前缀【比如ui】

访问ui目录时通过SpringBoot后端重定向到指定目录文件【更好的方案在生产上建议使用cdn或者nginx】

我们考虑增加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
    
      resourceHandlerList;             public List
     
       getResourceHandlerList() {            return resourceHandlerList;        }             public void setResourceHandlerList(List
      
        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
       
         resourceHandlerList = resourceHandlerConfig().getResourceHandlerList();        for (ResourceHandler resourceHandler : resourceHandlerList) {            registry.addResourceHandler(resourceHandler.getPattern())                    .addResourceLocations(resourceHandler.getLocation());        }         }         @Bean    public ResourceHandlerConfig resourceHandlerConfig() {        return new ResourceHandlerConfig();    }复制代码

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

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