vuecli2.0路由history单页面模式整合springboot，打包后页面使用url访问404解决方案

这个真的是被vue的这个路由坑得不轻了，被折磨了一天了，通过了一天半的百度和查询，终于在第二天早上了解决了这个问题

不废话直接开始内容

404原因解析：使用npm run build 打出来的包dist里面只有index.html和static文件夹两个内容，当你直接在浏览器直接输入url的时候，你的web容器直接就去找对应的127.0.0.1/XXX的html页面了，实际你的页面只有一个index.html，因此web容器当然就直接报404错误了

这一点在vue路由文档里有详细的说明，有兴趣的自己去阅读
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

解决方式有很多种，在这里都说一下
1、放弃使用history模式，改为hash模式，实现history伪路由
方法可以参考以下博客，把博主的代码直接复制到你的router/index.js里面，然后npm run build直接打包，放入springboot里面即可实现url访问对应页面
https://blog.csdn.net/Mr_WangGeGe/article/details/105487081
不足之处，由于是hash模式，访问的url里面有一层#

2、推荐方案，通过配置springboot页面的404处理，返回到vue的index页面
这里的思路来自于这篇大神的博客，通过配置WebServer，来实现对于springboot的web容器对于404情况下重定向到index.html页面
https://blog.csdn.net/lyn1772671980/article/details/80816960
大神的代码是springboot1.x版本的写法，springboot2.x以后，EmbeddedServletContainerCustomizer 这个接口已经被废除，springboot1.x可以参考大神的写法，我这里着重说一些springboot2.x的写法
当然方法不是固定的，你也可以通过在springboot里面写一个controller来处理vue页面404情况，不过总体思路大同小异

 	public static void main(String[] args) {
        SpringApplication.run(Demo.class);
    }

    //  解决vue路由history模式问题
    @Bean
    public WebServerFactoryCustomizer<ConfigurableWebServerFactory> containerCustomizer() {

        return new WebServerFactoryCustomizer<ConfigurableWebServerFactory>() {
            @Override
            public void customize(ConfigurableWebServerFactory factory) {
                ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
                factory.addErrorPages(error404Page);
            }
        };
    }

加入以上的WebServerFactoryCustomizer这个bean，vuecli使用history模式，执行npm run build打包，在sringboot项目中放入vue页面资源，springboot项目启动，即可通过url正常访问对应路径的页面