VUE项目打包发到Docker二次刷新页面报404错误问题解决

最新推荐文章于 2024-07-25 15:48:40 发布
最新推荐文章于 2024-07-25 15:48:40 发布
阅读量1k 收藏
点赞数
文章标签： nginx vue docker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wujize/article/details/106669285
版权
本文记录了在将Vue项目部署到Docker中的Nginx服务器后遇到的404错误问题。问题根源在于vue-router的路径与实际服务器资源不匹配。通过分析原因并调整Dockerfile和Nginx配置文件，特别是确保default.conf的正确设置，成功解决了这个问题。
摘要由CSDN通过智能技术生成

将VUE项目打包后发布到Docker的Nginx服务器后，基本使用正常，发现前端有一个404错误，但页面显示正常，在退出登录后，跳转到404页面，便这个404页面是nginx缺省的，并不是自己vue项目的，参考网上资料后搞定了此问题，特此记录：

一、原因

刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的。

二、Dockerfile文件

注意打包文件拷贝的目标路径，后面的default.conf要一致，否则会有问题

FROM urbgn6za.mirror.aliyuncs.com/library/nginx

MAINTAINER Wu Jize <wujize188@163.com>

RUN rm
最低0.47元/天 解锁文章
海盐老伍
关注
vue工程部署到docker后刷新出现404解决方案
weixin_43250455的博客
10-24 1057
vue工程部署到docker后刷新出现404解决方案 参考 https://blog.csdn.net/weixin_33695082/article/details/92719764 的修改， 修改nginx配置文件，增加对vue-route跳转，如下设置后，在docker中可以正常刷新。 server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/ng
Docker中通过nginx部署vue3项目的路由刷新404问题
TwiStar的博客
10-13 287
vue3项目通过nginx服务器部署到Docker中，路由路径刷新404问题。
dockerfile解决nignx镜像部署vue刷新404
controller_Lw的博客
05-24 889
问题描述 由于安全问题，客户现场的同事部署的Docker环境，nginx部署vue刷新404，这个问题在nginx 修改配置文件很简单的问题，由于本人也没有真正的接触过docker，我们这个边提出让他修改nginx的config 配置，对方提出修改docker 去解决这个问题。 一下是解决方案，我也是刚接触docker文件，先模仿学习，等以后经验多一点在分享个人想法。 FROM nginx:latest MAINTAINER iron.guo VOLUME /tmp ENV LANG en_US.UTF-8
vue项目 部署到nginx 上刷新页面显示404
最新发布
qq_30517167的博客
07-25 1943
在Vue项目部署到Nginx服务器上时，遇到刷新页面显示404的问题，通常是因为Nginx无法正确地处理Vue路由（尤其是单页面应用（SPA）中的前端路由）。Vue应用的路由是前端路由，依赖于JavaScript来动态解析URL，当直接访问除根路径外的URL时，Nginx默认会尝试在服务器上找到对应的文件或目录，如果找不到就会返回404错误。为了解决这个问题，你需要配置Nginx，使得所有请求都重定向到Vue应用的入口文件（通常是。（或类似的命令）构建完成，并且所有的构建文件（包括。
vue部署docker下的nginx刷新404
m0_46269902的博客
07-19 910
部署到nginx，访问首页没问题，从首页里跳转其他页面也没问题，但是非首页的其他页面，再次刷新，就会出现404现象。 Dockerfile '# 使用官方镜像，官方镜像比较纯净，没有curl等网络工具，需要安装网络工具需要自己构建nginx镜像 FROM nginx '# 将你的打包目录(h5)拷贝到 nginx镜像指定目录中 COPY h5/ /usr/share/nginx/html/ '# 将自定义的配置文件覆盖默认的配置文件 COPY default.conf /etc/nginx/conf.d/d
Docker部署Vue项目404问题
weixin_44355908的博客
09-22 2427
这个404页面是nginx缺省的，并不是自己vue项目的，网上查阅资料后搞定问题，记录一下 原因 刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的 Dockerfile # 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了 FROM nginx # 定义作者 MAINTAINER Abc
Vue项目部署后，刷新提示404
云在青天水在瓶
01-06 5847
一、遇到的问题 Vue项目打包部署到线上后，刷新页面会提示404。这是因为网页访问的是静态绝对路径，而服务器上没有该路径。 二、解决方法 方法一： 修改src/router/index.js文件中的mode属性，设置为hash。（这种调整，会使url出现"#"） 方法二： 调整nginx.conf配置文件 ...
Dockerfile部署前端vue项目之后报错404 502，一定是因为nginx的代理proxy_pass地址写错了，请将proxy_pass指向宿主机的ip地址
MysTic_的博客
05-19 456
vi /etc/nginx/conf.d/default.conf 修改配置文件，加入nginx代理配置。修改完之后重启容器，重新请求已经数据已经成功请求回来了。此时访问接口报404或者502的往下看。
手把手教你Vue项目实现本地Docker部署
03-24 930
近几年来，Docker 技术的应用已经越来越流行，目前已经产生前端工程Docker 化，身为前端开发的我，花了几天时间研究了下 Docker 的知识点，并实现了 Docker 本地部署 Vue 项目。希望可以给有需要的同学一点帮助。 什么是Docker? Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的Linux 机器上，也可以...
【SpringBoot+Vue实现书籍管理系统--下篇】整合MyBatisPlus完成分页功能的开发并部署到docker容器中
m0_67392273的博客
07-28 179
欢迎大家测试访问。
.NETCore和VUE部署在Linux-Nginx
weixin_45756851的博客
08-09 1086
Linux-Nginx、Docker篇、vue-elment-admin 部署
vue项目部署到服务器上刷新页面一直404
qq_41838435的博客
12-24 2043
项目是基于vue-admin-template开发的，部署到阿里云服务器之后，只要点击刷新，就一直404，情况如下： 最后发现是服务代理的问题，代理信息写错了，修改代理信息就好了。解决方案如下： 因为我遇到而问题是修改mode类型就解决了，其他情况的解决办法可参考：https://blog.csdn.net/weixin_42863883/article/details/106661250 ...
关于vue项目部署后刷新页面出现404
Nancy的博客
05-06 410
vue部署到nginx刷新页面404的解决方案
docker中使用nginx进行多个vue部署以及为什么部署完成后会404的原因
qq_32234547的博客
01-20 1254
因为对nginx不熟，同事也都是一些实习生，很多东西他们也不熟悉，导致要在nginx加入其他项目进行运行，导致一直404，我在网上找了很多方法，都进行了尝试，发现都没效果，后面我也发现了docker中的nginx和通过tar解压的方式有些不同，所以纪录一下这个问题的解决方式。 1.安装nginx,(我这个是下载最新版本的，想下载自己想要的版本，请在docker pull nginx:版本号,如果没了解过docker的可以往前看我的docker博客)，其他的安装方式就跟我之前写的docker安装nginx是
VUE项目通过nginx部署，刷新产生404
啃编程
12-17 465
系统不刷新是正常的，浏览器刷新通过路由访问报错404。通过修改nginx的配置来实现。
Centos8 下nginx 安装与代理docker部署的Vue项目+常见错误排错
向日的知识小站
07-09 409
目录 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、安装Centos8下安装Nginx sudo yum -y install nginx sudo systemctl star.
Nginx - Docker 容器化 Nginx 部署前端 Vue 项目访问 404
牧码的博客
08-05 1574
Nginx - Docker 容器化 Nginx 部署前端 Vue 项目访问 404
Nginx笔记-vue项目刷新出现404（try_files和index）
IT1995的博客
09-04 3465
try_files 更加可靠， 首先会查找"$uri"下的这个文件，如果不存在会查找$uri/,如果还不存在就会重定向到 /index.html页面。如果最后参数写错了，就会导致500的服务器错误。index 就是根目录，也就是只识别“/”结尾的，输入不存在或者刷新页面的路径就直接报nginx的404了，而不会重定向到index.html。部署是成功了，但是有个问题，就是感觉整个前端不会找uri，按F5或者在浏览器输入url都会404，只从vue默认的地方进，才行。
Docker部署Vue项目详解：从创建到实战
本文将详细指导如何使用Docker部署Vue项目，Docker作为一个轻量级的容器化平台，能提供持续集成、版本控制、可移植性和安全性等优点，尤其适用于前后端分离的开发场景。以下是实现步骤： 1. **准备工作**: - 确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值