使用history路由方式时，你有自己动手配置过服务器端吗？为什么要配服务器端？怎么配？

是的，使用 history 路由模式时，需要配置服务器端。这是因为 history 模式改变了 URL，但不像 hash 模式只改变了 hash 部分，它是直接改变了路径。 当用户直接访问或刷新这些新的 URL 时，如果没有服务器端的正确配置，服务器会返回 404 错误，因为服务器上并没有对应的文件或路由。

为什么要配置服务器端？

浏览器在使用 history 模式时，会直接向服务器请求新的 URL。例如，你的应用有一个路由 /users/123，当用户访问这个 URL 时，如果服务器没有配置处理这个 URL 的规则，它会认为你在请求一个名为 123 的文件，位于 /users 目录下。由于这个文件通常不存在，服务器会返回 404 错误。

怎么配置服务器端？

配置服务器端的方法取决于你使用的服务器和框架。核心思想是将所有前端路由请求重定向到你的应用的入口文件 (通常是 index.html)，然后由前端路由器接管 URL 并渲染相应的组件。

以下是一些常见服务器的配置示例：

• Nginx:

server {
  listen 80;
  server_name yourdomain.com;

  root /path/to/your/app; # 应用的根目录
  index index.html;

  location / {
    try_files $uri $uri/ /index.html; # 尝试访问文件或目录，如果不存在则返回 index.html
  }
}

• Apache:

<VirtualHost *:80>
  ServerName yourdomain.com
  DocumentRoot /path/to/your/app

  <Directory /path/to/your/app>
    AllowOverride All
    Require all granted

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f  # 如果请求的文件不存在
    RewriteCond %{REQUEST_FILENAME} !-d  # 如果请求的目录不存在
    RewriteRule ^ index.html [L]        # 重写规则，将所有请求重定向到 index.html
  </Directory>
</VirtualHost>

• Node.js with Express:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build'))); // 静态资源目录

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

关键点：

• try_files (Nginx): 尝试访问文件或目录，如果不存在则返回 index.html。
• RewriteRule (Apache): 定义重写规则，将所有请求重定向到 index.html。
• express.static (Express): 处理静态文件请求。
• /* 路由 (Express): 捕获所有路由，并将请求重定向到 index.html。

总结:

配置服务器端是为了确保当用户直接访问或刷新使用 history 模式的 URL 时，服务器能够正确响应，返回 index.html，让前端路由器处理 URL 并渲染正确的视图，避免 404 错误。 选择哪种配置方式取决于你的具体服务器环境和技术栈。 记住要将 /path/to/your/app 替换为你应用的实际根目录。