前端路由 實際是路由與組件的映射表
訪問任何路徑，服務器只需要回應index.html （單頁面應用）
瀏覽器根據不同路由 匹配要渲染的內容
重繪操作時候： 瀏覽器會帶著地址欄路由請求服務器回傳相應地靜態資源
如果沒有找到對應的資源 回傳 404
配置nginx:
location / {
root /...
# vue工程的路由是history模式
try_files $uri $uri/ /index.html; // ** 重點加上這個配置
index index.html index.html
}
前端 HTML5 History API
historyApiFallback
historyApiFallback 主要是用來解決HTML5 History API，訪問服務器，回傳404錯誤問題
問題
- 在路由跳轉之后，進行頁面重繪時，回傳404錯誤
- 通過頁面的前端路由訪問頁面內容，回傳404
配置參考webpack 配置 devServer -> historyApiFallback
boolean型別： 默認為false
設定為true時，任何服務器404 response 都會回傳index.html頁面
物件型別： rewrites 配置多個匹配
參考 connect-history-api-fallback
配置多個頁面匹配
devServer: {
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: 'index.html' },
{ from: /^\/test/, to: 'test.html' }
]
}
}
cli 使用
開啟： webpack serve --history-api-fallback
禁用： webpack serve --no-history-api-fallback
serve webpack-dev-server
vue/cli專案中默認配置了true
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/384190.html
標籤：其他