vue-router history模式与express connect-history-api-fallback中间件搭配使用
最近接了一个小项目,类似一个论坛的形式,只是在上面修修补补的,项目前端用的vue,并且前端路由vue-router用的是history,这样,在express的静态文件夹设置为dist目录的时候,出现各种404错误,经过查询,发现当路由模式为history的时候,后端会直接请求地址栏中的文件,这样就会出现找不到的情况,需要结合express的connect-history-api-fallback
最近接了一个小项目,类似一个论坛的形式,只是在上面修修补补的,项目前端用的vue,并且前端路由vue-router用的是history,这样,在express的静态文件夹设置为dist目录的时候,出现各种404错误,经过查询,发现当路由模式为history的时候,后端会直接请求地址栏中的文件,这样就会出现找不到的情况,需要结合express的connect-history-api-fallback来处理。总体思路就是:
当请求满足以下条件的时候,该库会把请求地址转到默认(默认情况为index.html):
- 请求方式为GET(前端路由请求的当然要是GET)
- 接受文件类型为text/html(即ajax请求中的dataType)
- 与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中间件有几个可选配置项:
- index:配置默认的index页面
- rewrites:通过正则配置,配置相关路由
- verbose:日志选项
- htmlAcceptHeaders:覆盖Accepts,更改请求的dataType配置
- disableDotRule
中间件Git地址:https://github.com/bripkens/connect-history-api-fallback
vue-router history配置说明地址:https://router.vuejs.org/zh/guide/essentials/history-mode.html
更多推荐
所有评论(0)