vue部署在nginx后刷新404，一行代码解决掉

最新推荐文章于 2025-05-30 09:34:33 发布
最新推荐文章于 2025-05-30 09:34:33 发布
阅读量2.5k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： web前端技术 随手使用小记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a631373000/article/details/99698039
本文解析了一个关于网站根目录和索引文件配置的案例，详细介绍了如何设置D盘特定路径作为网站资源的根目录，并说明了如何指定index.html和index.htm作为默认索引文件。此外，还解释了try_files指令的作用，即当请求的URI对应文件不存在时，如何尝试使用默认的index.html文件。

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

官网推荐

location / {
　　root   D:\Test\exprice\dist;
　　index  index.html index.htm;
　　try_files $uri $uri/ /index.html;
vue项目线上页面刷新报404 解决方法
zhaofuqiangmycomm的博客
02-01 2568
打包后的dist下只有一个 index.html 文件及一些静态资源，这个是因为Vue是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转
springboot+vue2前后端分离 nginx代理 服务器部署
WOSHIKJ123的博客
11-30 1372
springboot+vue2 前后端分离 nginx代理 服务器部署
vue下使用nginx刷新页面404的问题解决
10-16
主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue项目 部署到nginx 上刷新页面显示404
qq_30517167的博客
07-25 3180
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
解决Nginx部署Vue项目刷新页面404问题
最新发布
lsk0909的博客
05-30 1130
摘要： 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问题的解决
m0_37630138的博客
10-08 5246
vue项目通过nginx部署，刷新产生404问题的解决
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
热门推荐
qq_52700250的博客
06-22 1万+
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
vue-nginx刷新404问题
z69183787的专栏
08-02 5807
vue项目只有一个组件，路由模式是history，路由中有一个根路径重定向配置，路由配置如下path: '/',},routes})vue项目build之后，使用nginx部署build之后的产物，nginx路由配置如下/home/hfy/dist文件夹中存放的是build产物，包含css、fonts、js文件夹以及favicon.ico、index.html我添加上述规则是想解决刷新页面后404问题。
Nginx配置React项目Url后直接输入路由路径时报404问题的解决
09-30
然而，在部署React应用到服务器时，尤其是使用Nginx作为反向代理服务器时，可能会遇到一个常见的问题：当用户直接在浏览器地址栏输入特定的路由路径（如`http://localhost/demo/page1`）时，服务器返回404错误。...
手把手教你Docker+nginx部署Springboot+vue前后端分离项目
2401_86963632的博客
09-06 1543
公众号同名。其实我觉得我已经录制得很详细的了，可能大家水平不一，有些人觉得我很多地方讲清楚，还有就是有些人按照视频同步做实验，还一路踩坑，这个我也预料不到哈哈。说实话，我自己做实验的过程还是挺顺利的。有些同学们提出个问题，不知道如何打包部署Vue前后端分离项目。那么今天，我们就来学习一下，如何部署简单快捷部署我们的vueblog项目！名称：[实战]基于SpringBoot+Vue开发的前后端分离博客项目完整教学（vueblog）
vue部署后刷新白屏404？前端路由模式详解（hash和history）
hhhhhhhssss的博客
07-12 4017
前言 不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。 不出意外的话，我猜你用的一定是history的路由模式。 没错，这就是history中的一个问题，接下来让我们一起探索一下前端路由吧！ 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np impo
vue项目通过nginx部署，F5页面刷新后产生404问题的解决
huang877620097的博客
04-30 1356
vue项目通过nginx部署，刷新产生404问题的解决
vue下使用nginx刷新页面404
JiAyInNnNnN123的博客
07-18 585
nginx 是一个代理的服务器。 出现的问题：写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404，并且从其他页面跳转可以看到但是刷新页面就404。 解决方法： 在文件中的nginx.conf文件中修改，代码如下 server { listen YYYY; //自己设置的端口号 server_name 192....
Nginx部署Vue项目,刷新页面出现404
绅士jiejie的博客
05-31 523
解决方法 修改nginx.conf配置文件，添加try_files $uri $uri/ /index.html配置项，具体如下： location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html;#解决页面刷新404 } ...
nginx部署vue项目，刷新页面404
qq_45029459的博客
02-13 3273
nginx+vue刷新404
nginx 配置 client_max_body_size 解决上传大文件的问题
丙火的博客
07-29 1190
解决文件上传HTTP错误（413） 编辑 nginx.conf #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { includ
vue 在nginx下页面刷新出现404问题
知行合一
06-12 6074
vue 在nginx下页面刷新出现404问题，解决在nginx下页面加载了js但是页面显示空白问题解决 一、vue 在nginx下页面刷新出现404 1、如果是在根目录则配置如下 location / { 　　root /； 　　index index.html; 　　try_files $uri $uri/ /index.html } 2.如果是有特定目录 location /xx/xx/ ...
nginx部署vue项目刷新404
qq_35301793的博客
08-21 377
我自己使用的nginx版本:1.19.2 出现的问题:输入地址第一次能进去页面,刷新当前页面直接404. 解决方案: location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 然后附上修改后的nginx配置文件 worker_processes 1; events { worker_connectio
前端vue部署到nginx
03-09
这一步骤对于防止刷新页面时出现 404 错误至关重要[^1]。 #### 修改 Nginx 配置文件 在 `/etc/nginx/sites-available/default` 或者自定义站点配置文件中加入如下设置： ```nginx server { listen 80; server_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值