html配置路由404_前端路由history模式时后端使用Koa如何配置？

前些日子做一个微信内打开的SPA网页时，遇到了hash截断的问题，于是前端路由就采用了history模式，在后端同事的配合下完美解决。经此之后，本人对hash的感觉就不如以前强烈了，开始大量使用history模式。

刚好最近在整合的一个后台项目也是SPA

后台管理系统​yinchengnuo.com

因为是个人项目，所需的后台接口和数据也都是自己用Node.js的Koa搭建的。这就涉及到了SPA使用history模式时后端配置问题。本项目前端用的Vue，路由自然用的就是Vue-Router。关于Vue-Router的history模式后端配置例子，官网给出了几个不同后端语言的示例：

HTML5 History 模式 | Vue Router​router.vuejs.org

关于Node.js相关的只有原生Node.js和一个Express中间件。因为本项目的后端用的是Koa，我在npm找了几个相关的包，效果都不怎么理想，索性自己实现了一个，其实也非常简单：后端路由在接收到 '/adminVueElement' 和 '/adminVueElement/tools/download-excel' 及所有的以 '/adminVueElement' 开头的 Get 请求，都必须返回用一个 html 文件，不能报 404。

因为是用的Koa。就不可避免的用的许多中间件。如本项目的后端：

app.use(cors()); //允许跨域
app.use(body({ multipart: true })) //获取post请求体中间件
app.use(static("./")); //静态文件中间件
app.use(compress({ threshold: 2048 })); //gzip中间件

本项目打包后的前端代码，我是放在根目录下的 'adminVueElement' 文件夹。因为 koa-static 中间的作用，在访问 '/adminVueElement' 时，koa-static 会自动去adminVueElement 文件夹找到 index.html 返回给浏览器。然而当我们访问 '/adminVueElement/tools/download-excel' 时，必然会返回 404。因为 'adminVueElement' 文件夹下根本就没有 tools 文件夹，因此需要我们自己动手判断一下，对 koa-static 的执行结果做一下处理。

根据 koa 中间件先进后出的原则。我们需要自己实现一个中间件放在 koa-static 前面。等 koa-static 执行完，检查返回的内容。如果我们发现返回了 404 同时 url 也包含 '/adminVueElement' 那么，我们取消返回 404，返回指定 html。

说起来有点绕，直接上代码：

app.use(cors()); //允许跨域
app.use(body({ multipart: true })) //获取post请求体中间件
app.use(async (ctx, next) => { // history 中间件
  const path = '/adminVueElement/' // 需要判断的路径
  await next() // 等待请求执行完毕
  if (ctx.response.status === 404 && ctx.request.url.includes(path)) { // 判断是否符合条件
    ctx.type = 'text/html; charset=utf-8' // 修改响应类型
    ctx.body= fs.readFileSync('.' + path + 'index.html') // 修改响应体
  }
})
app.use(static("./")); //静态文件中间件
app.use(compress({ threshold: 2048 })); //gzip中间件

这样，一个简单的 koa history 中间件就实现了。