nginx发布vue 项目，刷新404问题

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

#linux

nginx部署vue 项目，在项目的子路由下刷新页面出现了404，这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。
解决：
使用try_files

location / {
   
   
	    try_files $uri $uri/ /index.php?$query_string;
}

当用户请求 http://localhost/example 时，这里的 uri就是/example。tryfiles会到硬盘里尝试找这个文件。如果存在名为/uri 就是 /example。 try_files 会到硬盘里尝试找这个文件。如果存在名为 /uri就

最低0.47元/天 解锁文章
Nginx 部署 Vue 项目刷新页面出现404
weixin_43966635的博客
08-20 969
问题 使用Vue.框架，利用vue-route编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象。 原因 刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。这些访问资源都是在js里渲染。 解决方案 在nginx配置里添加vue-route的跳转设置 server { ....
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue项目 部署到nginx 上刷新页面显示404
qq_30517167的博客
07-25 3264
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
Vue3项目Nginx部署刷新404问题解决方法
最新发布
BillKu的博客
10-09 516
Vue项目部署后刷新404，通常通过正确配置Nginx，让无法找到资源的请求回退到index.html即可解决。关键是根据你的项目是部署在根目录还是子目录，选择合适的Nginx配置写法，并确保Vue项目的路由模式和公共路径设置与之匹配。
vue下使用nginx刷新页面404的问题解决
10-16
主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue项目nginx部署刷新报错404
qq_40096322的博客
09-30 3062
当vue项目打包后,放在nginx内的html文件夹,启动部署后,访问刷新报错404,再次访问就又好了的问题,做出如下两种方式解决。1.修改vue项目的路由router配置文件的模式,将history改为hash即可。2.修改nginx的配置文件nginx.conf,添加如下配置,重启nginx即可。
解决Nginx部署Vue项目刷新页面404问题
lsk0909的博客
05-30 2101
摘要： Vue等SPA应用部署在Nginx时，刷新子路由会出现404错误，因为Nginx直接查找对应文件路径而非返回index.html。解决方案包括： 修改Nginx配置（推荐）：添加try_files $uri $uri/ /index.html，将所有请求重定向到前端路由； 启用Vue Router的history模式； 改用hash模式（URL含#，不推荐）。 需确保静态资源路径正确，配置后执行nginx -t验证并重载服务。若项目非根路径部署，需同步调整Vue Router的base选项。
nginx部署vue项目 刷新404
07-03
### 解决 Nginx 部署 Vue 项目刷新页面返回 404 错误的方案 Vue 是典型的单页应用（SPA），其路由机制依赖前端 JavaScript 控制，而非传统的服务器端路由。当使用 `history` 模式时，URL 路径如 `/about` 并不对应...
Vue项目nginx服务器部署刷新页面404错误
07-27 4799
vue项目nginx服务器部署刷新页面和打开新页面报404错误
nginx服务器上部署vue项目，刷新或者打开新窗口时出现404的解决方法
qq_42498327的博客
04-12 1954
前言 最进写了一个小项目，前端用vue来写的，后端用SSM写的，后端的项目已经在服务器正常运行起来了，而前端一直在Idea上运行，还没有打包对项目打包在生产环境运行。 突发奇想，想把前端的项目也部署在服务器上运行。我下载乃本地模拟部署了一下，发现在打开新窗口或者界面刷新的时候出现了404的错误。 问题分析和解决方案 404异常表示我们的服务器上没有对应的URL资源，我们发现当前刷新的路径时...
vue项目通过nginx部署，刷新产生404问题的解决
m0_37630138的博客
10-08 5344
vue项目通过nginx部署，刷新产生404问题的解决
vue-nginx刷新404问题
z69183787的专栏
08-02 6057
vue项目只有一个组件，路由模式是history，路由中有一个根路径重定向配置，路由配置如下path: '/',},routes})vue项目build之后，使用nginx部署build之后的产物，nginx路由配置如下/home/hfy/dist文件夹中存放的是build产物，包含css、fonts、js文件夹以及favicon.ico、index.html我添加上述规则是想解决刷新页面后404问题。
nginx配置vue刷新404
大赚万万亿
11-14 416
检查配置文件是否配置正确,并运行nginx。
nginx部署vue项目刷新404
xixingzhe2的博客
06-22 473
# 测试3 location / { root /usr/local/openresty/nginx/html/test3; index index.html index.htm; try_files $uri $uri/ /index.html; #解决页面刷新404问题 }
部署vue项目通过Nginx映射，刷新页面出现404
DDaIYaweN的博客
12-06 2265
Vue项目部署Nginx后，刷新页面出现404问题问题描述原因分析解决方案 问题描述 部署vue项目，配置好nginx文件后，通过路由跳转进入页面无问题，刷新后页面丢失，报nginx 404 原因分析 因为页面开发模式只有一个index.html入口，其他路径是通过路由跳转的，nginx没有对应这个路径，报错404。 解决方案 修改nginx.conf配置文件： 增加：try_files $uri $uri/ /index.html; #解决页面刷新404问题。 server { li
vue下使用nginx刷新页面404
liuting52001的专栏
06-09 306
nginx 是一个代理的服务器。 出现的问题：写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404，并且从其他页面跳转可以看到但是刷新页面就404。 解决方法： 在文件中的nginx.conf文件中修改，代码如下 ...
Vue-使用Nginx时遇到刷新后404
weixin_41367190的博客
08-10 77
在nginx配置中加入try_files $uri $uri/ /index.html; 如下：登录后复制 location / { try_files $uri $uri/ /index.html; #解决页面刷新404 }1.2.3.　　作者：꧁执笔小白꧂ ...
nginx 配置 client_max_body_size 解决上传大文件的问题
丙火的博客
07-29 1215
解决文件上传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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值