現象:Angular、Vue和React項目SPA應用如果路由模式爲history,部署到服務器後,點擊瀏覽器刷新按鈕會出現404。
原因:當路由模式爲history的時候,服務器端會根據瀏覽器中的請求地址去匹配資源,此時服務器端沒有對應的接口地址,因此返回404.
解決辦法:使用connect-history-api-fallback中間件
安裝connect-history-api-fallback中間件
npm install --save connect-history-api-fallback
在app.js文件中增加以下代碼
const history = require('connect-history-api-fallback')
app.use('/', history());
重新啓動服務