動態

詳情 返回 返回

SPA應用的hash模式和history模式部署問題 - 動態 詳情

hash模式和history模式的差異是什麼?

拿這個地址為例:
http://xxx.com#about
http://xxx.com/about

hash模式
由於http請求並不包含hash,所以不管hash值為多少,服務器端收到的請求始終都是/

history模式
history模式下,後面的/about路徑會被服務器接收到,然後嘗試去處理這個/about

為什麼hash模式不用配置,history模式卻要?

這是因為hash模式的路由path值並不會傳遞給後端,所以你的任意path,對後端來説都不可見,它只會認為你在訪問根目錄的index.html

history模式的路由path會傳遞到後端,後端會嘗試把前端路由當成後端路由來處理,也就會造成非預期的結果。

ps:這也是為什麼在history模式下,只要你在根路由不切換路由到其他路由,再怎麼刷新也是可以正常使用的原因,因為根路由沒有額外的路由path傳遞給後端去解析。

怎麼解決?

其實和hash模式的原理是相通的,hash模式時,路由默認就不會被傳遞到後端,但是history模式會,那麼在history模式下,我們只需要按照這個思路,將前端傳來的路由忽略掉就行了。

下面這段nginx配置就是起到這樣的作用,對那些後端不存在的請求的路由請求,直接返回index.html。這樣就可以讓前端接管路由了。

location / {
  # 表示首先嚐試以文件形式提供請求的內容
  # 然後以目錄形式提供
  # 最後如果都失敗則返回 index.html 頁面
  try_files $uri $uri/ /index.html;
}

nginx如何配置子應用?

3個目標應用

# 主應用
http://xxx.com/

# 子引用1
http://xxx.com/child-project1

# 子引用2
http://xxx.com/child-project2

對應的nginx配置:

# 主應用
location / {
  try_files $uri $uri/ /index.html;
}

# 子應用1
location /child-project1 {
  try_files $uri $uri/ /child-project1/index.html;
}

# 子應用2
location /child-project2 {
  try_files $uri $uri/ /child-project2/index.html;
}
user avatar toopoo 頭像 longlong688 頭像 u_17443142 頭像 xiaoxxuejishu 頭像 febobo 頭像 weidewei 頭像 kitty-38 頭像 aser1989 頭像 happy2332333 頭像 lpicker 頭像 huaweiyun 頭像 kanshouji 頭像
點贊 36 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.