Vue路由与Nginx路由冲突怎么办？

vue 路由和后端 nginx 路由冲突处理

当在 vue 应用中使用路由/article，并且后端 nginx 也有/article路由时，刷新页面后可能会导致页面跳转到其他位置。这是因为 nginx 拦截了刷新请求，并将其重定向到自己定义的/article路由。

解决方法：

• 移除后端 nginx 的/article路由：将 nginx 配置中的/article路由移除，以避免与 vue 应用中的路由冲突。
• 使用 nginx 的 try_files 配置：如果你在 vue 应用中启用了历史路由模式，则需要在 nginx 配置中使用try_files来指定文件查找顺序。这将确保 nginx 在找不到静态文件时不会进行 url 重写。

nginx 配置示例：

立即学习“前端免费学习笔记（深入）”；

location / {
    root /path/to/html/;
    try_files $uri $uri/ /index.html =404;
}

登录后复制

注意：

• 确保 vue 应用和 nginx 配置都已更新，并重新启动相关服务。
• 如果页面仍然跳转到错误的位置，请检查 nginx 配置文件和其他可能影响路由行为的设置。

以上就是Vue路由与Nginx路由冲突怎么办？的详细内容，更多请关注其它相关文章！

Tags： 路由冲突