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//打出转发日志
  }));