---

title: SpringBoot和Vue的工程化實踐之分分合合 tags:

• SpringBoot
• VUE
• 工程化 categories: springboot date: 2017-11-24 23:28:37

---

背景

由於現在普遍的前後端分離開發 【前端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();
    }
複製程式碼

如上我們就完成了對映關係

這樣就能訪問到指定的檔案