VUE项目打包发到Docker二次刷新页面报404错误问题解决
ztj100 2025-06-13 18:11 3 浏览 0 评论
将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 /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
#文件拷贝到镜像的目标路径，后面用$uri可以访问到，
COPY dist/ /etc/nginx/html/三、Nginx配置文件
Nginx启动配置文件是default.conf文件，这个文件要特别注意格式
server {
listen 8090;
server_name 192.168.195.17;
index index.html;
#charset koi8-r;
# cross
#
location /prod-api/ {
proxy_pass http://192.168.195.17:8088/;
}
# 解决出现404问题
location / {
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html break;
}
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
相关推荐
- 13个python常用库，提高你的开发能力
-
Python拥有大量封装好的功能模块和工具库，这些库广泛应用于数据分析、机器学习、Web开发、自动化等多个领域。库在Python的作用非常重要，利用库不仅能简化复杂的任务还能极大减少开发的时间。下面介...
- TensorFlow中logits的含义解析（tensorflow2 lstm）
-
技术背景在机器学习尤其是深度学习领域，...
- Python TensorFlow机器学习模型构建指南
-
以下是一篇关于使用Python和TensorFlow构建机器学习模型的详细指南，结合代码示例和关键概念解释：探索TensorFlow：构建强大的机器学习模型TensorFlow是由Goo...
- TensorFlow和Pytorch中的音频增强
-
对于图像相关的任务，对图像进行旋转、模糊或调整大小是常见的数据增强的方法。因为图像的自身属性与其他数据类型数据增强相比，图像的数据增强是非常直观的，我们只需要查看图像就可以看到特定图像是如何转换的，...
- 使用TensorFlow进行深度学习模型训练
-
深度学习是一种机器学习的子领域，它通过模拟人脑神经网络的结构和运作方式，从而实现在大规模数据上进行复杂任务的训练和预测。TensorFlow是由Google开发的一款开源的深度学习框架，它为我们...
- Keras各种Callbacks介绍（keras中backend常用）
-
1前言在tensorflow.keras中，callbacks能在fit、...
- 实例解析神经网络的工作原理（神经网络具体实例）
-
来源：算法进阶...
- 在浏览器中进行深度学习:TensorFlow.js (五)构建一个神经网络
-
这一次我们终于可以开始真正的深度学习了，从一个神经网络开始。神经网络（NeuralNetwork）是深度学习的基础，基本概念包括：神经元，层，反向传播等等。如果细讲我估计没有五到十篇文章那是讲不完的...
- TensorFlow和Keras入门必读教程（tensorflow_core.keras）
-
导读：本文对TensorFlow的框架和基本示例进行简要介绍。作者：本杰明·普朗什（BenjaminPlanche）艾略特·安德烈斯（EliotAndres）来源：华章科技01TensorFlo...
- Transformer系列:残差连接原理详细解析和代码论证
-
关键词：...
- 详解SoftMax多分类器（多分类svm代码）
-
常见的逻辑回归、SVM等常用于解决二分类问题，对于多个选项的分类问题，比如识别手写数字，它就需要10个分类，同样也可以用逻辑回归或SVM（只是需要多个二分类来组成多分类）。对于多分类的实现，我们还可以...
- 如何使用 TensorFlow 构建机器学习模型
-
在这篇文章中，我将逐步讲解如何使用TensorFlow创建一个简单的机器学习模型。TensorFlow是一个由谷歌开发的库，并在2015年开源，它能使构建和训练机器学习模型变得简单。...
- 芋道 ruoyi-vue-pro 踩的那些坑—前端编译打包问题
-
1、芋道ruoyi-vue-pro前端没有README.md，是可以理解，毕竟他们是以文档来创收的。但是对于非专业的前端人员非常的不友好。坑是一个接一个，很崩溃。我看项目有有个yarn.lock，...
- Nginx部署Vue项目以及解决刷新页面404
-
在部署vue、react的前端项目时，经常会出现404的问题，一般是文件不是真正的存在，所以Nginx报404的错误一、打包项目1.在项目中的package.json上右键，点击Shownpm...
- vue3管理后台，打包方便体积小，访问速度快，代码规整可读性强
-
项目介绍增强型vue3管理后台，打包方便体积小，访问速度快，代码规整可读性强。项目特点首页...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 13个python常用库，提高你的开发能力
- TensorFlow中logits的含义解析（tensorflow2 lstm）
- Python TensorFlow机器学习模型构建指南
- TensorFlow和Pytorch中的音频增强
- 使用TensorFlow进行深度学习模型训练
- Keras各种Callbacks介绍（keras中backend常用）
- 实例解析神经网络的工作原理（神经网络具体实例）
- 在浏览器中进行深度学习:TensorFlow.js (五)构建一个神经网络
- TensorFlow和Keras入门必读教程（tensorflow_core.keras）
- Transformer系列:残差连接原理详细解析和代码论证
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)