vue的路由模式中,如果使用history,刷新页面会报404错误。具体原因是前端路由的路径资源并不是一个真实的路径,所以刷新后nginx无法找到具体的文件。因此需要在服务端做以下配置:如果 URL 匹配不到任何静态资源,则rewrite到index.html中,然后交给路由在处理请求资源。

​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌​‌‌​​​‌‌​​​​​‍​​‌​‌‌‌‌‌‌‌‌​​​‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​‌‌​​​‌‌‌​​​‌​‌‍​​‌‌‌‌‌‌‌‌​​‌‌‍​‌‌​​​​‌​​​​​​​‍​​​‌​‌​‌‌​‌​‌‌‌‍‌​‌‌​​​‌‍‌​​‌‌​​​‍‌​​‌​‌‌​‍‌​​‌​​​‌‍‌​​​​‌‌‌‍​‌‌​‌‌‌‌​​​‌​‌‌‌‍​​​​​​​‌​​​‌‌​‌‍‌​‌​‌​​‌‍‌​​​‌​‌​‍‌​​‌‌​‌​‍​‌​‌‌​​‌​‌​‌​‌​‍​‌‌​​‌‌‌‌​​​‌​‌​‍​‌‌​‌​​​‌​​‌‌‌​‌‍​‌​​​​‌​‌‌​‌​‌‌‍​​​‌​‌​‌‌​‌​‌‌‌‍​‌​‌‌​‌‌‌​​‌​​​‍​​‌‌​‌​​‌​​‌‌‌‌‍​​‌‌‌​‌​‌​‌‌​‌​‍‌‌​​‌​‌‌‍‌‌​​‌‌‌‌‍‌‌​​‌​‌‌‍​‌‌​‌​‌​​​​‌​​​‌‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​​​‌​‌​‌‌​​‌‌‌​‍‌​​‌‌‌‌​‍‌​​‌‌​‌‌‍‌​​‌​​‌​‍‌​​‌​‌‌​‍‌​​‌​​​‌‍​‌‌​​​‌​‌‌‌​​​‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​​‌‌‌​‍‌‌​​​‌‌‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌​‍‌‌​​‌‌​‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌​‍‌‌​​‌‌​‌‍​‌​‌‌​‌‌‌‌​​‌​​‍​‌‌​​​​‌​‌​​​‌‌‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​​​‌‌​​​​​‍​​‌‌​‌​​‌‌‌‌​​​‍​‌​‌​​​‌‌​​‌‌‌‌‍​‌​‌​​​‌​‌‌‌‌‌‌‍​​​​​​​​‌‌‌​​‌​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​​‌​‌‌‍‌​​​‌‌‌‌‍‌​​​‌‌​​‍‌‌​​​‌​‌‍‌​‌​​​‌‌‍‌​‌​​​‌‌‍‌​​‌​‌‌​‍‌​​‌​‌​​‍‌​​‌​‌‌​‍‌​​​‌​​​‍‌​​‌​‌‌​‍‌‌​‌​​​‌‍‌​​‌​​‌​‍‌​​‌‌​‌​‍‌​‌​​​‌‌‍‌​​‌‌‌‌​‍‌​​​‌‌​‌‍‌​​‌‌‌​​‍‌​​‌​‌‌‌‍‌​​‌​‌‌​‍‌​​​‌​​‌‍‌​​‌‌​‌​‍‌​​​‌‌​​‍‌​‌​​​‌‌‍‌‌​​‌​​‌‍‌‌​​‌​‌‌‍‌‌​‌​​​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​‌​​‌​‍‌​​‌​​‌‌

nginx配置

server {
   listen       80;
   server_name localhost;
   root         /usr/share/html/dist;
   location / {
     try_files $uri $uri/ @router;
     index index.html index.htm;
   }
   location @router {
       rewrite ^.*$ /index.html last;
   }
}

或者更简单的写法:

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

参考链接:
https://router.vuejs.org/zh/guide/essentials/history-mode.html