vue-router history模式與express connect-history-api-fallback中間件搭配使用

最近接了一個小項目，類似一個論壇的形式，隻是在上面修修補補的，項目前端用的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