背景

由于现在普遍的前后端分离开发 【前端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();
    }

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

180151_yUWG_871390.png

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