使用Nginx部署vue项目刷新页面出现404问题

最新推荐文章于 2025-05-30 09:34:33 发布
最新推荐文章于 2025-05-30 09:34:33 发布
阅读量4.2k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue部署刷新404 文章标签： 前端 vue nginx反向代理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/llupengt/article/details/121560455
本文详细讲述了如何在Nginx配置中通过添加`try_files$uri$uri//index.html;`解决Vue应用刷新导致的404问题，提供了解决方案和关键配置步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在使用Nginx配置，反向代理vue的项目，发现点击都是正常的，只是刷新页面就会出现404，经过咨询运维大神和查资料，终于找到解决办法了。主要是在Nginx的配置文件加上这句：

try_files $uri $uri/ /index.html;

如图

 

nginx发布vue 项目，刷新404问题
mynameisjinxiaokai的博客
11-23 635
nginx部署vue 项目，在项目的子路由下刷新页面出现了404，这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。 解决： 使用try_files location / { try_files $uri $uri/ /index.php?$query_string; } 当用户请求 http://localhost/example 时，这里的 uri就是/example。tryfiles会到硬盘里尝试找这个文件。如果存在名为/uri 就是 /ex
Nginx 部署 Vue 项目刷新页面出现404
weixin_43966635的博客
08-20 929
问题 使用Vue.框架，利用vue-route编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象。 原因 刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。这些访问资源都是在js里渲染。 解决方案 在nginx配置里添加vue-route的跳转设置 server { ....
vue项目 部署到nginx 上刷新页面显示404
qq_30517167的博客
07-25 3175
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
解决Nginx部署Vue项目刷新页面404问题
lsk0909的博客
05-30 1077
摘要： Vue等SPA应用部署在Nginx时，刷新子路由会出现404错误，因为Nginx直接查找对应文件路径而非返回index.html。解决方案包括： 修改Nginx配置（推荐）：添加try_files $uri $uri/ /index.html，将所有请求重定向到前端路由； 启用Vue Router的history模式； 改用hash模式（URL含#，不推荐）。 需确保静态资源路径正确，配置后执行nginx -t验证并重载服务。若项目非根路径部署，需同步调整Vue Router的base选项。
vue 在nginx下页面刷新出现404问题
知行合一
06-12 6072
vue 在nginx下页面刷新出现404问题，解决在nginx下页面加载了js但是页面显示空白问题解决 一、vue 在nginx下页面刷新出现404 1、如果是在根目录则配置如下 location / { 　　root /； 　　index index.html; 　　try_files $uri $uri/ /index.html } 2.如果是有特定目录 location /xx/xx/ ...
vue-nginx刷新404问题
z69183787的专栏
08-02 5789
vue项目只有一个组件，路由模式是history，路由中有一个根路径重定向配置，路由配置如下path: '/',},routes})vue项目build之后，使用nginx部署build之后的产物，nginx路由配置如下/home/hfy/dist文件夹中存放的是build产物，包含css、fonts、js文件夹以及favicon.ico、index.html我添加上述规则是想解决刷新页面后404问题。
vue项目nginx部署刷新报错404
qq_40096322的博客
09-30 3039
当vue项目打包后,放在nginx内的html文件夹,启动部署后,访问刷新报错404,再次访问就又好了的问题,做出如下两种方式解决。1.修改vue项目的路由router配置文件的模式,将history改为hash即可。2.修改nginx的配置文件nginx.conf,添加如下配置,重启nginx即可。
docker使用nginx部署vue刷新页面404
weixin_44953395的博客
01-16 1411
docker使用nginx部署vue刷新页面404
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue下使用nginx刷新页面404的问题解决
10-16
以上步骤可以有效解决使用Vue.js和nginx部署的单页面应用（SPA）在刷新页面时出现404错误的问题。这种配置使得nginx可以正确地处理所有前端路由的请求，避免了用户刷新页面时服务器尝试访问不存在的文件路径，从而...
【Nginx 】Nginx 部署前端 vue 项目
热门推荐
衍生星球的博客
09-06 1万+
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。
nginx 部署vue项目 刷新页面404 解决方案
do_you_like_van_game的博客
08-04 583
在niginx配置文件下 静态目录 加入 location / { root D:/project/run_project/dist/; index index.html index.htm; if (!-e $request_filename) { rewrite ^(.*)$ /index.html?s=/$1 last; break; ...
Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）
mrliucx的博客
02-21 3189
Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）
nginx服务器上部署vue项目，刷新或者打开新窗口时出现404的解决方法
qq_42498327的博客
04-12 1884
前言 最进写了一个小项目，前端用vue来写的，后端用SSM写的，后端的项目已经在服务器正常运行起来了，而前端一直在Idea上运行，还没有打包对项目打包在生产环境运行。 突发奇想，想把前端的项目也部署在服务器上运行。我下载乃本地模拟部署了一下，发现在打开新窗口或者界面刷新的时候出现了404的错误。 问题分析和解决方案 404异常表示我们的服务器上没有对应的URL资源，我们发现当前刷新的路径时...
Vue项目nginx服务器部署刷新页面404错误
07-27 4748
vue项目nginx服务器部署刷新页面和打开新页面报404错误
Nginx Vue项目页面刷新404问题
lvhui321的博客
08-26 1674
nginx vue项目代理配置
vue项目通过nginx部署，F5页面刷新后产生404问题的解决
huang877620097的博客
04-30 1350
vue项目通过nginx部署，刷新产生404问题的解决
vue部署在nginx后刷新404，一行代码解决掉
a631373000的专栏
08-17 2544
官网推荐 location / { 　　root D:\Test\exprice\dist; 　　index index.html index.htm; 　　try_files $uri $uri/ /index.html;
nginx部署vue项目 刷新404
最新发布
07-03
### 解决 Nginx 部署 Vue 项目刷新页面返回 404 错误的方案 Vue 是典型的单页应用（SPA），其路由机制依赖前端 JavaScript 控制，而非传统的服务器端路由。当使用 `history` 模式时，URL 路径如 `/about` 并不对应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值