Vue路由重写# 与 Web服务器路由重写双配置实现路由重写

前言

vue路由组件我使用的vue-router
web服务器使用nginx

Vue-router配置

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载
http://localhost:8080/#/HelloWorld
如果不想要很丑的 hash，可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router =new Router({
  mode: 'history',
  routes: [...]
})

不过这种模式需要后台配置支持。如果后台没有正确的配置，当用户在浏览器直接访问就会返回 404

Web服务器配置

如果要使用history模式，则需要进行服务器配置
所以，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是app 依赖的页面
下面分别介绍Nginx和Apache下的重写配置

Nginx配置

location / {
  try_files $uri $uri/ /index.html;
}

Ap