Nginx配置多前端，页面刷新404

### Vue History Mode 下 Nginx 配置避免 404 的解决方案 当使用 Vue Router 的 `history` 模式时，URL 不再带有 `#` 符号，这使得 URL 更加美观和语义化。然而，在这种模式下，如果用户直接访问某个路径或者刷新页面，服务器会尝试查找对应的文件并返回 404 错误，因为这些路径实际上是由前端路由处理的。 为了避免这种情况发生，可以通过配置 Nginx 将未匹配到静态资源的请求重定向回应用入口文件（通常是 `index.html`）。以下是具体的配置方法： #### 修改 Nginx 配置 在 Nginx 中，通过设置 `location` 块来捕获所有未找到对应文件的请求，并将其转发给 `index.html` 文件。以下是一个典型的配置示例[^2]： ```nginx server { listen 80; server_name your-domain.com; root /path/to/your/vue/app/dist; # 替换为实际部署项目的根目录 index index.html; location / { try_files $uri /index.html; # 如果找不到文件，则加载 index.html } error_page 404 /404.html; # 可选：自定义错误页 location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ { # 处理静态资源缓存策略 expires max; add_header Cache-Control "public, must-revalidate"; } } ``` 上述配置的关键部分在于 `try_files $uri /index.html` 这一行。它告诉 Nginx 对于任何无法映射到具体文件或目录的 URI 请求都应返回 `index.html` 页面，从而让前端框架接管后续的路由逻辑。 完成修改之后记得重启 Nginx 来使更改生效： ```bash sudo systemctl restart nginx ``` 另外需要注意的是，如果你的应用运行在一个子路径而非网站根路径上 (比如 http://example.com/myapp/) ，那么还需要调整 Vue 路由的基础路径以及相应地更新 Nginx 设置中的 `root` 和 `location` 参数[^3]。 #### 测试配置有效性 为了验证新配置是否正常工作，可以执行如下操作： 1. 构建生产环境下的 Vue 应用 (`npm run build`)； 2. 把构建后的产物上传至指定的服务端位置； 3. 使用浏览器打开任意非首页链接地址进行测试——即使手动输入该网址也应该能够正确显示内容而不是遇到 404 错误。