解决vue部署到nginx后刷新404

最新推荐文章于 2024-03-11 19:18:30 发布
最新推荐文章于 2024-03-11 19:18:30 发布
阅读量171 收藏
点赞数
分类专栏： 工作总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang_guang3/article/details/115491323
版权
本文介绍了如何配置Nginx，特别是在location配置块中使用try_files指令，以解决Vue应用在部署后刷新页面出现404错误的问题。
摘要由CSDN通过智能技术生成

在location标签下面添加try_files标签内容

location / {
 	root   /usr/local/nginx/html/dist;
    index  index.html index.htm;
	try_files $uri $uri/ /index.html;
}
Rsun04551
关注
专栏目录
订阅专栏
vue项目nginx部署刷新报错404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
12-23 408
最近部署VUE项目，刷新后提示404
Vue上传宝塔Nginx反向代理，解决Vue上传服务器后刷新404
qying的博客
08-11 622
Vue上传宝塔Nginx反向代理，解决Vue上传服务器后刷新404
Windows系统使用Nginx部署Vue
2301_78834737的博客
07-12 2661
Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。,出现以下界面说明启动成功(由于笔者电脑80端口被占用，所以更改为8080，nginx默认为80端口)。工具，将Nginx转换为Windows服务，Windows系统重启后会自动启动Nginx服务。​ 配置文件如下：主要包含日志位置、启动和关闭，目录根据自己安装位置调整（不要有中文）。用cmd命令窗口，cd 到nginx解压目录，，根据系统版本下载对应工具。
解决vue项目部署到Nginx刷新页面报404的问题
世华的博客
10-27 1107
编辑配置文件nginx.conf vim vue_8000.conf -- 进入配置文件 输入命令 i 进入编辑模式,在指定位置添加代码 location / { root ... index ... try_files $uri $uri/ /index.html; -- 解决页面刷新404问题 } esc :wq -- 保存并退出 nginx -s reload -- 重启nginx ...
Nginx状态监控及日志分析,VUE项目版本迭代自动更新当前版本的代码 更新 刷新 自动更新静态文件 reload
asd52656的博客
06-05 1621
Nginx状态监控及日志分析 1、Nginx状态监控 Nginx提供了一个内置的状态信息监控页面可用于监控Nginx的整体访问情况，这个功能由ngx_http_stub_status_module模块进行实现。 使用nginx -V 2>&1 | grep -o with-http_stub_status_module命令检测当前Nginx是否有status功能，如果输出ngx_http_stub_status_module则说明是有的，如果没有可以在编译时加上此模块。 默认情况下，statu
解决VUE项目发布NGINX下刷新404问题
u014572906的博客
08-14 110
打包前台项目部署后，刷新提示404 一开始以为是代码问题 后来逐个分析发现是nginx拦截请求问题 在nginx.conf配置文件中，配置如下内容即可 try_files $uri $uri/ /index.html; location / { root E:\wyf\vs\dist; index index.html index.htm; try_files $uri $uri/ /index.html; //关.
Nginx 服务部署 Vue （history）项目后刷新页面 404 问题
0老船长0的博客
10-26 907
表现 VUE使用‘history’路由模式,刷新页面后，则出现 404 Not Found 原因 nginx配置的根目录/xxx/dist下面压根没有’Menu/index’这个资源存在，这些资源都是在js里渲染的。 解决方案 vi nginx.conf 输入命令 i 进入编辑模式 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } 重启Ngi...
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue下使用nginx刷新页面404的问题解决
10-16
在使用Vue.js构建的前端项目中，尤其是使用了现代前端技术栈如Vue Router进行路由管理时，部署到生产环境后可能会遇到在使用nginx作为反向代理服务器时刷新页面导致的404错误问题。这个问题通常是由于nginx的默认...
解决vue打包项目后刷新404的问题
08-27
总之，解决Vue打包后刷新404的问题主要是通过正确配置服务器，确保所有请求都能导向Vue应用的入口HTML文件，让前端路由有机会处理路由跳转。通过理解这一机制，你可以更好地管理和部署Vue应用，提供更流畅的用户体验...
vue项目部署到nginx上，刷新404
joy_1004的博客
11-19 390
vue项目部署到nginx上，刷新404 vue路由模式改为history后，需让nginx配置try_files，不然访问不到 修改nginx.conf location / { root html/jeecg-web; index index.htm index.html; try_files $uri $uri/ /index.html; #解决页面刷新404问题 } ...
Vue项目重新部署后，提示用户刷新网页
xingchen678的博客
10-12 1291
Vue项目重新部署后，提示用户刷新网页
vue中history模式egg后台宝塔上线后刷新nginx报错404
Oublieasd的博客
08-01 686
我们都知道vue中路由有两种模式:hash模式和history模式，我也尝试了history模式，但是项目上线之后每每刷新nginx就会报错，最后我在网上找了尝试了一圈都没有解决问题。最后含泪换回hash模式，但是看着长长一串的url，还有个扎眼的#号，十分的难看，但在hash模式下刷新不会404。 hash模式下的url在后台请求之后#之前的内容还是存在与此次请求中的，因此每一次请求都会返回index.html页面，这样路由就交给了前端处理。那么同样也是路由的history模式却没有hash的功能，没有
vue nginx 刷新报404
m0_37542032的博客
08-16 101
问题： Vue单页应用项目打包部署Nginx服务器后，从首页访问可以，但刷新页面后，出现404。 原因： 加载单页应用后路由改变均由浏览器处理，而刷新时将会请求当前的链接，而Nginx无法找到对应的页面。 解决： 在Nginx配置文件nginx.conf中加入如下配置。(index.html根据实际页面配置) try_files $uri $uri/ /index.html; ...
解决Vue项目部署到Nginx服务器刷新404问题
蓝墨の学习笔记
12-03 554
解决Vue项目部署到服务器刷新404问题
vue项目路由模式为history时打包后部署在nginx服务器后，刷新页面空白的问题
u011295864的博客
07-16 4936
放在nginx服务器根目录下的情况： vue.config.js配置： publicPath: '/' router配置： base: '/', mode: 'history' nginx配置文件： location / { try_files $uri $uri/ /index.html; root html; index index.html index.htm; } 放在nginx服务器根目录下一个子目录下的情况（以子目录名称是demo为例）： vue.
vue项目部署后刷新页面404的原因和解决方案
为技术而生
03-11 9586
vue项目打包部署上线后发现项目是可以正常运行，但是使用F5或者浏览器的刷新按钮直接变成404页面。 扩展：当项目部署到服务器子文件路径时资源404问题。
nginx 前端项目部署-vue以及前端页面刷新404问题&nginx: [error] invalid PID number ““ in “/usr/local/var/
springorg的博客
07-15 359
nginx前端项目部署： 1.nginx 安装完成后修改配置文件： 原文件默认端口为80： > vim 文件小操作： > 1.复制,粘贴,撤回： 连按两次 yy 复制当前光标所在行； p 键粘贴；u键撤回； n yy 复制当前光标行及以下n行； > 2.编辑： A i o 键分别为 ： A 键在光标所在行的末尾开始编辑； I 键则是在光标所在行的开头编辑； o 键另起一行进行编辑； > 3.替换： :s/[]/[] 例如： s/80/8080 替换光标所在行字符； :/
Vue重新部署后刷新页面
zzzzzzzi111的博客
07-28 1328
Vue重新部署后刷新页面
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
发出的红包

打赏作者

Rsun04551

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值