Skip to content

vue-router history模式nginx配置

原因

hash模式的项目前进后台刷新都不会有问题,因为向服务器请求地址时是不带hash值的。

history模式的项目中url地址是通过h5的history API设置的,当浏览项目的二级页面的时候,浏览器并没有发送请求(会保存在历史纪录中),因此实现前进后退是没有任何问题的。因为刷新是实实在在的向后端服务器发送这个url的请求的,but后台并不存这一个目录,所以返回404

解决

js
 # 解决vue路由模式为history时刷新返回404的问题
location / {
  root /usr/share/nginx/html;
  index /index.html;
  try_files $uri $uri/ /index.html;
}