大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

vue router 刷新404问题

1. 问题描述

  • 单页面应用的vue项目,设置router模式为history。可以跳转但刷新了页面,则显示为404。
  • vue-router的默认hash模式使用URL的hash来模拟一个完整的URL,当URL改变时,页面不会重新加载。但是这种hash很丑,也不符合对URL的使用习惯。所以,需要使用另外一个叫history模式来实现URL跳转而无须重新加载页面。
    export default new Router({
        mode: "history",
        routes: [# other code ]
    )}

2. Apache服务器配置

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]  
</IfModule>

3. nginx服务器配置

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