history 模式刷新 404 问题解决方法_history刷新问题

在使用 Vue Router 的 history 模式时，刷新页面可能会导致出现 404 错误。这是因为 history 模式依赖于浏览器的 history.pushState API 来管理路由状态，而刷新页面时浏览器会向服务器发送请求，服务器无法正确地解析这些路由并返回对应的页面，从而导致 404 错误。

要解决 history 模式刷新 404 问题，可以进行以下操作：

1. 配置服务器：

   • 如果你使用的是基于 Node.js 的服务器（如 Express），需要配置服务器以始终返回 index.html 页面，即使在不存在的路由上也是如此。这样，当刷新页面时，服务器将始终返回 index.html，然后由 Vue Router 接管路由处理。

   • 在 Express 中，可以使用类似下面的代码来配置服务器：

     javascriptCopy Codeconst express = require('express');
     const path = require('path');
     const app = express();
     
     // 配置静态资源目录
     app.use(express.static(path.join(__dirname, 'dist')));
     
     // 配置路由处理
     app.get('*', (req, res) => {
       res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
     });
     
     // 启动服务器
     app.listen(3000, () => {
       console.log('Server is running on port 3000');
     });
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16

   • 需要根据你的服务器环境和配置进行适当调整。

2. 调整 Vue Router 配置：

   • 在创建 Vue Router 实例时，可以添加一个 base 配置项，用于指定应用的基础 URL 路径。这个路径应该与服务器上配置的静态资源目录相匹配。

   • 在 Vue CLI 生成的项目中，Vue Router 的配置通常位于src/router/index.js文件中。你可以在创建路由实例时添加base配置项，如下所示：

     javascriptCopy Codeconst router = new VueRouter({
       base: '/your-base-url', // 根据服务器配置的静态资源目录进行调整
       routes: [
         // 路由配置
       ]
     });
     1
     2
     3
     4
     5
     6