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;
}