通過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