vue网页浏览器刷新404问题解决

Vue.js 应用在浏览器中刷新页面时可能会遇到 404 错误，这是因为 Vue.js 使用的是前端路由，而不是后端的真实路由。当用户直接访问非首页的 Vue.js 路由或者刷新页面时，服务器会尝试寻找对应的真实路径，但找不到因而返回 404 错误。

解决方法：

1. 使用 Vue Router 的 history 模式。在 Vue Router 中，默认使用的是 hash 模式，它会将路由重定向到 index.html 并使用 URL 的 hash 来模拟一个完整的 URL。要使用 history 模式，需要服务器能正确处理任何一个 URL 请求，返回 index.html 页面。

2. 配置服务器：

   • 对于 Node.js 的 Express 服务器，可以使用 history 中间件：

     
     
     
     const history = require('connect-history-api-fallback');
     app.use(history());

   • 对于 Apache 服务器，可以在 .htaccess 文件中添加：

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

   • 对于 Nginx 服务器，在配置文件中添加：

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

通过以上步骤，可以确保在使用 Vue.js 的 history 模式时，不会因为页面刷新或直接访问非首页链接导致 404 错误。