vue-router history模式下，子路由以及刷新页面not found问题解决

以前一直用的都是hash模式，最近的项目是导师写好的前端，我来搞后端，由于她弄的是history模式，本地调试没问题，打包后启动服务器就会遇到子页面刷新后not found，以及多级路由也not found的状况。

由于vue的路由是在浏览器中进行管理，若是刷新http://localhost:3011/时能够访问到的，由于请求/路径，node将其指向了index.html(由于webpack打包会把index.html打包到根目录，而koa-webpack在没有传递参数的状况下也是指向的webpack配置文件中output中的publicPath，配置文件中配置的是/，因此默认/请求指向index.html),如下是koa-webpack中默认配置的源代码

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1210894-bb4f6395ba003114.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240z

而/example1请求到node，node会去寻找node端的路由处理，由于node端没有配置这个路由，全部找不到。

若是想要访问到/example1，须要请求到index.html,而后由vue的路由处理找到对应的模块

查了一圈，解决方法有两个（亲测均可以） 参考https://www.jianshu.com/p/c6859a6d4e7e 的文章解决了问题，感谢！（如下为转载内容）

• 改为hash模式

　　　这个不详细说了，你们都懂，可是由于这个项目对路由形式有点要求，并且涉及到路由传参，hash就有点麻烦，因此找了第二种方法。

• 将全部html请求转到index.html 而后让vue的浏览器处理

  1.2 配置node端

  1.将全部的html请求转到index.html,有一个现成的插件connect-history-api-fallback替咱们作了这件事，可是须要稍微封装一下才能在koa2中使用。
  （1）npm install connect-history-api-fallback --save 下载插件包
  （2）在根目录下添加middleware文件夹，用于存放koa的中间件
  （3）在middleware文件夹中添加koa2-connect-history-api-fallback.js 文件，koa2中间件须要传入须要的方法，因此封装返回了一个方法

     const history = require('connect-history-api-fallback');
      module.exports = options=> {
          const middleware = history(options);
          const noop = ()  => {
          };
  
          return async (ctx, next)=> {
            middleware(ctx, null, noop);
          await next();
          };
      };

   

  2.在app.js添加

  
  注意：app.use(history(...))要写在app.use(middleware({...}))以前，否则koa-webpack已经返回not found了，app.use(history(...))就不会生效了

  11.写好以后重启服务，而后访问浏览器刷新http://localhost:3011/example1就能够访问到了
  而且能够看到日志，只有请求html转到了index.html

  ！！！！注意：app.use(history(...))要写在全部中间件以前！！！！

  const history = require('./middleware/koa2-connect-history-api-fallback');和
  app.use(history({
  verbose: true//打出转发日志
  }));