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

最新推荐文章于 2025-10-09 18:02:36 发布
原创 最新推荐文章于 2025-10-09 18:02:36 发布 · 4.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue #nginx反向代理

本文详细讲述了如何在Nginx配置中通过添加`try_files$uri$uri//index.html;`解决Vue应用刷新导致的404问题，提供了解决方案和关键配置步骤。

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

try_files $uri $uri/ /index.html;

如图

 

nginx发布vue 项目，刷新404问题
mynameisjinxiaokai的博客
11-23 662
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 970
问题 使用Vue.框架，利用vue-route编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象。 原因 刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。这些访问资源都是在js里渲染。 解决方案 在nginx配置里添加vue-route的跳转设置 server { ....
vue项目 部署到nginx 上刷新页面显示404
qq_30517167的博客
07-25 3268
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
vue 在nginx下页面刷新出现404问题
知行合一
06-12 6106
vue 在nginx下页面刷新出现404问题，解决在nginx下页面加载了js但是页面显示空白问题解决 一、vue 在nginx下页面刷新出现404 1、如果是在根目录则配置如下 location / { 　　root /； 　　index index.html; 　　try_files $uri $uri/ /index.html } 2.如果是有特定目录 location /xx/xx/ ...
Vue3项目Nginx部署刷新404问题解决方法
最新发布
BillKu的博客
10-09 554
Vue项目部署后刷新404，通常通过正确配置Nginx，让无法找到资源的请求回退到index.html即可解决。关键是根据你的项目是部署在根目录还是子目录，选择合适的Nginx配置写法，并确保Vue项目的路由模式和公共路径设置与之匹配。
vue-nginx刷新404问题
z69183787的专栏
08-02 6064
vue项目只有一个组件，路由模式是history，路由中有一个根路径重定向配置，路由配置如下path: '/',},routes})vue项目build之后，使用nginx部署build之后的产物，nginx路由配置如下/home/hfy/dist文件夹中存放的是build产物，包含css、fonts、js文件夹以及favicon.ico、index.html我添加上述规则是想解决刷新页面后404问题。
nginx--部署vue项目到服务器接口报404
这里是迷阵的博客耶
08-19 1399
问题 部署到服务器接口报错404 原因 ng没有配置 解决方案 server { listen 80; try_files $uri $uri/ /index.html;// 配置登录页 location /api/{ proxy_pass 后端接口域名;//后端接口代理 proxy_cookie_path / /api;//代理的名称，下图的 /api rewrite ^/api/(.*) /$1 break; } } ...
docker使用nginx部署vue刷新页面404
weixin_44953395的博客
01-16 1517
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下部署vue项目的方法步骤
09-29
在部署Vue项目到Nginx服务器时，首先需要了解Nginx是一个高性能的HTTP和反向代理服务器，其通过将静态内容服务、负载均衡、缓存等技术相结合，提供了一种高效、可靠和灵活的方式，用于在生产环境中托管Web应用。...
nginx部署vue刷新404
风水道人
03-07 163
nginx部署vue刷新404
vue项目nginx部署刷新报错404
qq_40096322的博客
09-30 3065
当vue项目打包后,放在nginx内的html文件夹,启动部署后,访问刷新报错404,再次访问就又好了的问题,做出如下两种方式解决。1.修改vue项目的路由router配置文件的模式,将history改为hash即可。2.修改nginx的配置文件nginx.conf,添加如下配置,重启nginx即可。
部署vue项目通过Nginx映射，刷新页面出现404
DDaIYaweN的博客
12-06 2267
Vue项目部署Nginx后，刷新页面出现404问题问题描述原因分析解决方案 问题描述 部署vue项目，配置好nginx文件后，通过路由跳转进入页面无问题，刷新后页面丢失，报nginx 404 原因分析 因为页面开发模式只有一个index.html入口，其他路径是通过路由跳转的，nginx没有对应这个路径，报错404。 解决方案 修改nginx.conf配置文件： 增加：try_files $uri $uri/ /index.html; #解决页面刷新404问题。 server { li
nginx 部署vue项目 刷新页面404 解决方案
do_you_like_van_game的博客
08-04 605
在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 3247
Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）
nginx服务器上部署vue项目，刷新或者打开新窗口时出现404的解决方法
qq_42498327的博客
04-12 1956
前言 最进写了一个小项目，前端用vue来写的，后端用SSM写的，后端的项目已经在服务器正常运行起来了，而前端一直在Idea上运行，还没有打包对项目打包在生产环境运行。 突发奇想，想把前端的项目也部署在服务器上运行。我下载乃本地模拟部署了一下，发现在打开新窗口或者界面刷新的时候出现了404的错误。 问题分析和解决方案 404异常表示我们的服务器上没有对应的URL资源，我们发现当前刷新的路径时...
解决Nginx部署Vue项目刷新页面404问题
lsk0909的博客
05-30 2177
摘要： 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错误
07-27 4800
vue项目nginx服务器部署刷新页面和打开新页面报404错误
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、付费专栏及课程。

余额充值