vue部署在nginx后刷新404

最新推荐文章于 2024-10-16 15:40:59 发布
最新推荐文章于 2024-10-16 15:40:59 发布
阅读量4.2k 收藏 6
点赞数 3
文章标签： vue打包 vue刷新404 nginx部署vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/83960005
版权

出现这种情况是因为用了history路由模式，vue默认是hash路由的，所以打包前配置一下。

然后在nginx配置一下

这样就ok了。

woshidamimi0
关注
解决vue部署到nginx后刷新404
Rsun2018的博客
04-07 176
在location标签下面添加try_files标签内容 location / { root /usr/local/nginx/html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; }
NGINX 部署项目时，遇到刷新页面导致 404
King Saj
06-05 1046
通过以上配置，你的 NGINX 将正确处理所有请求，避免刷新页面导致的 404 错误。此时，所有的 URL 请求都会被重定向到。，并由前端路由器（如 React Router 或 Vue Router）处理具体的路由。首先，确保你的项目已经构建完毕，并且所有静态文件（如。文件等）都位于一个目录下，例如。
nginx配置：部署后刷新产生404错误
2201_75396743的博客
09-24 693
在这里记录一下前端部署过程中，遇到的浏览器刷新出现的nginx_error问题。将前端部署到服务器上之后，页面之间可以相互跳转，但是只要一点击浏览器刷新页面之后就会出现红红的大大的nginx_error。
Nginx与history路由模式：刷新页面404问题
席木木的博客
02-08 5232
Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决
vue下使用nginx刷新页面404
weixin_30420305的博客
07-18 253
nginx 是一个代理的服务器。出现的问题：写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404，并且从其他页面跳转可以看到但是刷新页面就404。解决方法：在文件中的nginx.conf文件中修改，代码如下 server { listen YYYY; //自己设置的端口号 server_name 192...
vue项目 部署到nginx 上刷新页面显示404
qq_30517167的博客
07-25 2464
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
vue下使用nginx刷新页面404的问题解决
10-16
在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue项目nginx部署刷新报错404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
12-23 421
最近部署VUE项目，刷新后提示404
vite vue3 histroy项目发布nginx刷新后404问题
ICEBOUND47的博客
02-17 3614
打包后发布服务能正常运行，但是刷新之后项目404 在网上找到相关配置仍然未解决为题 server { listen 80; index index.html; root /xxxx/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^
vue项目打包部署到服务器上后页面404问题
热门推荐
qq_45963071的博客
11-24 1万+
当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网。我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决。
nginx刷新显示404
qq_39535439的博客
11-17 8589
nginx部署完项目后，访问时 刷新后 就会出现404的报错界面(不是首页根目录刷新时)
nginx 正常访问，刷新404
liudongyang123的博客
07-11 966
部署完成前端服务，浏览器正常访问没有问题，但是F5刷新的时候，会提示404，丢失了资源。
vue项目通过nginx部署，刷新产生404问题的解决
huang877620097的博客
04-30 790
vue项目通过nginx部署，刷新产生404问题的解决
安装Windows版nginx以及部署前端代码并就解决刷新出现404
y516369的博客
07-27 5500
安装Windows版nginx以及部署前端代码并就解决刷新出现404
Nginx配置后请求报404的解决思路
最新发布
AlegFox的博客
10-16 1643
请求返回 404 错误，可能确实与Host头有关，也有可能是后端服务器本身的资源路径问题。
VUE 发布在nginx 刷新404
weixin_42061531的博客
04-12 142
vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址）#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404。# 处理的host地址 （请替换成你对应的项目访问 ip 或 域名）!#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件。
解决vue项目部署nginx刷新404问题
hello，word！
02-26 454
【代码】解决vue项目部署nginx刷新404问题。
vite部署到nginx后刷新页面404
10-13
当你将Vite项目部署到Nginx服务器并遇到页面刷新404错误时，这通常是因为Nginx配置未正确设置动态内容路径或者是Vite的静态文件URL处理不当。以下是可能的原因和解决步骤： 1. **Vue单页应用配置**： - Vite默认生成的是静态站点，所以你需要告诉Nginx如何解析动态请求。检查你的`nginx.conf`中的`try_files`指令，应该指向你的Vite构建后的目录，例如： ```bash location / { try_files $uri $uri/ /index.html =404; } ``` 2. **Vite devServer的部署模式**： - 如果你使用了Vite的`--preview`或`--host`选项部署到本地，需要确保Nginx正确转发请求。确保Vite devServer的`host`设置与Nginx监听的地址一致。 3. **Nginx代理配置**： - 如果你的应用运行在非根路径（如"/app"），你需要添加反向代理规则。例如： ```nginx server { listen 80; location /app { proxy_pass http://localhost:3000; # Vite devServer端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 4. **检查URL重写规则**： - 检查是否有不必要的URL重写，确保浏览器访问的URL可以直接匹配到Vite项目的资源。 5. **清除缓存**： - 清除浏览器缓存，并尝试通过控制台的开发者工具查看网络请求是否正确。 如果以上步骤都确认无误，还是存在问题，试着提供更多的上下文信息以便更精确地定位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值