vue-history-api-fallback
Express
middleware to redirect requests to a specified index page according to your vue-router
options, useful for Single Page Applications using the HTML5 History API.
Introduction
SPA using history
mode makes the URL look more "normal" (or Beautiful).
However, without a proper server configuration, the users will get a 404
error if they access the router page directly in their browser.
To fix the issue, you can choose to use connect-history-api-fallback that add a simple catch-all fallback route to your server.
However, there's another problem. Your server will no longer report 404 error as al not-found paths now serve up your index.html
file.
This middleware is to solve the problem.
Condition
This middleware will change the request url to a specified index page whenever the request meeting the following conditions:
- The method is
GET
- The request accepts
text/html
application/json
is not preferred- The request url is one of the route in
vue-router
options
Usage
Install
npm install vue-history-api-fallback --save
Use with express
const express = ;// importconst history = ;// get vue-router optionsconst options = ; let app = ;app;
Options
options.router
requre
The options of vue-router
It can be an instance of VueRouter
const VueRouter = ;let router = mode: 'history' routes: ...; ;
Or the options
const VueRouter = ;let options = mode: 'history' routes: ...;;let router = options;
options.index
default /index.html
The index page
;
options.redirect
default []
Redirct to index when the request url satisfy condition.
from
can be String
or RegExp
to
can be String
, Function
or undefined
(default options.index
)
;
options.logger
default false
Set this option to true
if you want to print log
;
You can also use your own logger in this way
{ console;} ;
options.htmlAcceptHeaders
default ['text/html', '*/*']
If the accept
in headers
of a request contains anyone of this list, the middleware will think the request accept HTML.
;
disableDotRule
default false
If the url contants a dot .
, this middleware will ignore it because it's not a direct file request.
;