最近接了一个小项目,类似一个论坛的形式,只是在上面修修补补的,项目前端用的vue,并且前端路由vue-router用的是history,这样,在express的静态文件夹设置为dist目录的时候,出现各种404错误,经过查询,发现当路由模式为history的时候,后端会直接请求地址栏中的文件,这样就会出现找不到的情况,需要结合express的connect-history-api-fallback来处理。总体思路就是:
当请求满足以下条件的时候,该库会把请求地址转到默认(默认情况为index.html):

  1. 请求方式为GET(前端路由请求的当然要是GET)
  2. 接受文件类型为text/html(即ajax请求中的dataType)
  3. 与options.rewrites中提供的模式不匹配(即自定义规则中没写到的)

通常来说,在express中配置以下代码就可以了:

const history = require('connect-history-api-fallback');
//这句代码需要在express.static上面
app.use(history());
app.use(express.static(path.join(__dirname, '../client/dist')));

这样,express就会把所有的get方式的请求都发给/index.html,然后由vue-router来接管页面路由,but,当我的ULR为http://localhost:3000/?tab=technology 时,其实就是主页上几个Tab页,通过get请求数据,get参数在地址栏中,这时候一直请求不到数据,百度了好多也没找到问题在哪,后面,当我改成

app.use(history(
    {
        htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
    }
));

的时候就没什么问题了,该中间件默认值是[‘text/html’, ‘/‘],难道我get请求的是dataType是’application/xhtml+xml’么,额,中间接手的项目,真是晕菜。
connect-history-api-fallback中间件有几个可选配置项:

  1. index:配置默认的index页面
  2. rewrites:通过正则配置,配置相关路由
  3. verbose:日志选项
  4. htmlAcceptHeaders:覆盖Accepts,更改请求的dataType配置
  5. disableDotRule

中间件Git地址:https://github.com/bripkens/connect-history-api-fallback
vue-router history配置说明地址:https://router.vuejs.org/zh/guide/essentials/history-mode.html

Logo

前往低代码交流专区

更多推荐