為什頁面刷新會出現(xiàn)404

因為vue項目中路由hash模式改為了history模式，由于hash模式時url帶的#號后面是哈希值不會作為url的一部分發(fā)送給服務器，而history模式下當刷新頁面之后瀏覽器會直接去請求服務器，而服務器沒有這個路由，于是就出現(xiàn)404。

那為什么頁面跳轉就是正常的？跳轉時其實不是通過請求服務器的，而是通過js操作history的API改變地址完成的。

建議：非C端系統(tǒng)可以考慮直接使用hash模式路由，就不會存在此問題了

Node服務使用Koa框架

使用koa-connect-history-api-fallback插件來解決

• 安裝依賴

npm install koa-connect-history-api-fallback --save

• 使用方法（此演示是使用TypeScript的情況下，用JavaScript開發(fā)的忽略直接看下面修改后的代碼）

在node項目中的 app.ts 文件中引入koa-connect-history-api-fallback

// 注意：該引用須在 `import koaStatic from 'koa-static';` 的前面
import history from 'koa-connect-history-api-fallback';
app.use(history());

此時會發(fā)現(xiàn)ts報錯提示： 找不到模塊“koa-connect-history-api-fallback”或其相應的類型聲明。ts(2307)

可以通過install該插件對應的類型聲明文件依賴@types/koa-connect-history-api-fallback來解決，但我嘗試安裝后發(fā)現(xiàn)npm服務器不存在該類型聲明文件，因此咱們用commonJs規(guī)范的方式引入該插件即可（因為這種方式默認導入的是 any 類型）

修改后的代碼如下:

const history = require('koa-connect-history-api-fallback');
app.use(history());

Node服務使用Express框架

使用connect-history-api-fallback插件來解決

• 安裝依賴

npm install connect-history-api-fallback --save

• 使用方法

const history = require('connect-history-api-fallback');
app.use(history());

以上就是vue路由history模式頁面刷新404解決方法Koa Express的詳細內容，更多關于vue history模式頁面刷新404的資料請關注腳本之家其它相關文章！