技術標籤：vue.jsspring

springboot 2.3.4部署vue-cli4

• 應用場景
• • 先配置好springboot工程中的application.yml
  • 先寫一個rest介面
  • 寫攔截器
  • 在resource目錄下新建一個manager目錄
  • vue打包配置
  • springboot還需要設定一些地方

應用場景

使用vue打包出來的dist，嵌入到springboot工程裡的resource的自定義目錄下，而springboot同時存在api介面，攔截器

先配置好springboot工程中的application.yml

相信很多人都有新增域名的需求

server:
  servlet:
    context-path: /sdp/rest
 

先寫一個rest介面

@RestController
@RequestMapping("api")
public class TestController {


    @RequestMapping("test")
    public Object test() {

        return "success";

    }
}

然後通過瀏覽器或者postman可成功呼叫
http://localhost:8080/sdp/rest/api/test

寫攔截器

public class AdminInterceptor implements
 
 HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {

        System.out.println("攔截:" + request.getRequestURI());
        return true;
    }
}

@Configuration
public class LoginConfig implements WebMvcConfigurer
 
 {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        InterceptorRegistration registration = registry.addInterceptor(new AdminInterceptor());
        registration.addPathPatterns("/api/**");
    }
}

攔截器是用來攔截api介面的

在resource目錄下新建一個manager目錄

為什麼要新建一個目錄呢，因為這樣才可以讓自己的靜態資原始檔不跟其他的模組衝突，例如swagger

vue打包配置

需要在vue.config.js中配置如下

module.exports = {
  publicPath:'/sdp/rest/manager'
}

在路由中配置如下

export default new Router({
  mode: 'history',
  base:'/sdp/rest/manager',

然後打包好的dist檔案放到manager目錄下即可

springboot還需要設定一些地方

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.
                addResourceHandler("/manager/**")
                .addResourceLocations("classpath:/manager/");

    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/manager")
                .setViewName("forward:/manager/index.html");
    }
}

然後啟動springboot即可
訪問連結是：
http://localhost:8080/sdp/rest/manager