springboot2.0 iview-admin2.0 vue-cli3整合

最近自己在做个vue/soringboot的项目，由于项目比较小没必要分开部署，整合的过程中遇到了一些问题这里记录下
vue和springboot集成时主要的关键点
vue前端的baseUrl要和springboot的contextPath 相同
springboot 404 拦截vue-router路由转到前端的入口点index.html

前端部分

1. vue.config.js的baseUrl与contextPath相同

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
 baseUrl:  process.env.NODE_ENV === 'production'  ? '/sealValidation/'   : '/'

2、axios baseURL与contextPath 相同

    baseUrl: {
        dev: 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/',
        pro: '/sealValidation'
    }
    const baseUrl = process.env.NODE_ENV === 'development' ? baseUrl.dev : baseUrl.pro
    const axios = new HttpRequest(baseUrl)

3、router history模式下 base与contextPath 相同

    Vue.use(Router)
	const router = new Router({
	  routes,
	  mode: 'history',
	  base: process.env.NODE_ENV === 'development' ? '' : '/sealValidation'
	})

4、构建项目

    npm run build

springboot部分

1、将构建好的vue项目dist文件夹下的内容全部拷贝到springboot项目的src/main/resources/static文件夹下

2、springboot 404 拦截vue-router路由

创建拦截器，拦截路由转到前端转到前端的入口点 index.html

package com.cdb.erms.seal.validation.config;

import java.util.HashSet;
import java.util.Set;

import org.springframework.boot.web.server.ConfigurableWebServerFactory;
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.WebServerFactoryCustomizer;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;

@Component
public class MyWebServerFactoryCustomizer implements WebServerFactoryCustomizer<ConfigurableWebServerFactory> {

	/**
	 * 添加404异常处理
	 */
	@Override
	public void customize(ConfigurableWebServerFactory factory) {
		Set<ErrorPage> errorPage = new HashSet<ErrorPage>();
		errorPage.add(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
		factory.setErrorPages(errorPage);
		
	}

}

好了，现在可以启动你的springboot项目试试啦