部署Vue项目，运行刷新后404问题（已解决）_vue项目部署到服务器刷新404 not found

作者：你好赵伟 | 2024-05-24 22:36:22

踩

vue项目部署到服务器刷新404 not found

前言：

最近在部署 Vue 单页面应用（SPA）到服务器（Nginx）时，遇到了一个问题：首次运行正常，切换页面刷新浏览器后出现404错误。经过分析，发现这是因为服务器无法正确处理前端路由（vue-router）导致的。

思路：
针对这个问题，需要配置服务器，使得对所有前端路由路径的请求都返回同一个 index.html 文件。这样，Vue 应用将加载并确定展示哪个组件。针对 Nginx 服务器，可以通过修改配置文件来解决这个问题。

解决：
在 Nginx 的配置中，添加一个新的 location / 块，并使用 try_files 指令，这样所有的路由都会被指向 index.html 文件。这样一来，无论用户访问的是哪个前端路由，Nginx 都会返回 index.html 文件，然后前端路由就能正确地接管页面的显示了。


// nginx配置文件
 
location / {
    try_files $uri $uri/ /index.html;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/619346