VUE项目打包发到Docker二次刷新页面报404错误问题解决
off999 2025-04-05 21:16 10 浏览 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
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;
}
}
相关推荐
- 每天一个 Python 库:datetime 模块全攻略，时间操作太丝滑!
-
在日常开发中，时间处理是绕不开的一块，比如：生成时间戳比较两个时间差转换为可读格式接口传参/前端展示/日志记录今天我们就用一个案例+代码+思维导图，带你完全搞定datetime模块的用法！...
- 字节跳动!2023全套Python入门笔记合集
-
学完python出来，已经工作3年啦，最近有很多小伙伴问我，学习python有什么用其实能做的有很多可以提高工作效率增强逻辑思维还能做爬虫网站数据分析等等！！最近也是整理了很多适合零基...
- 为什么你觉得Matplotlib用起来困难?因为你还没看过这个思维导图
-
前言Matplotlib是一个流行的Python库，可以很容易地用于创建数据可视化。然而，设置数据、参数、图形和绘图在每次执行新项目时都可能变得非常混乱和繁琐。而且由于应用不同，我们不知道选择哪一个图...
- Python新手必看!30分钟搞懂break/continue(附5个实战案例)
-
一、跳转语句的使命当程序需要提前结束循环或跳过特定迭代时，break和continue就是你的代码急刹按钮和跳步指令。就像在迷宫探险中：break=发现出口立即离开continue=跳过陷阱继续前进二...
- 刘心向学(24)Python中的数据类（python中5种简单的数据类型）
-
分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard新学苑。今天小编为大家带来文章“刘心向学（24)Python中的数据类”欢迎您的访问。Shareinterest,...
- 刘心向学(25)Python中的虚拟环境（python虚拟环境安装和配置）
-
分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard新学苑。今天小编为大家带来文章“刘心向学（25）Python中的虚拟环境”欢迎您的访问。Shareinte...
- 栋察宇宙(八):Python 中的 wordcloud 库学习介绍
-
分享乐趣，传播快乐，增长见识，留下美好。亲爱的您，这里是LearingYard学苑！今天小编为大家带来“Python中的wordcloud库学习介绍”欢迎您的访问！Sharethefun,...
- AI在用|ChatGPT、Claude 3助攻，1分钟GET高颜值思维导图
-
机器之能报道编辑：Cardinal以大模型、AIGC为代表的人工智能浪潮已经在悄然改变着我们生活及工作方式，但绝大部分人依然不知道该如何使用。因此，我们推出了「AI在用」专栏，通过直观、有趣且简洁的人...
- 使用DeepSeek + Python开发AI思维导图应用，非常强!
-
最近基于Deepseek+PythonWeb技术开发了一个AI对话自动生成思维导图的应用，用来展示下如何基于低门槛的Python相关技术栈，高效结合deepseek实现从应用场景到实际应用的快速落地...
- 10幅思维导图告诉你 - Python 核心知识体系
-
首先，按顺序依次展示了以下内容的一系列思维导图：基础知识，数据类型（数字，字符串，列表，元组，字典，集合），条件&循环，文件对象，错误&异常，函数，模块，面向对象编程；接着，结合这些思维导图主要参考的...
- Python基础核心思维导图，让你轻松入门
-
Python基础核心思维导图【高清图文末获取】学习路线图就给大家看到这里了，需要的小伙伴下方获取获取方式看下方图片...
- Python基础核心思维导图，学会事半功倍
-
Python基础核心思维导图【高清图文末获取】学习路线图就给大家看到这里了，需要的小伙伴下方获取获取方式看下方图片...
- 硬核!288页Python核心知识笔记(附思维导图，建议收藏)
-
今天就给大家分享一份288页Python核心知识笔记，相较于部分朋友乱糟糟的笔记，这份笔记更够系统地总结相关知识，巩固Python知识体系。文末获取完整版PDF该笔记学习思维导图：目录内容展示【领取方...
- Python学习知识思维导图(高效学习)
-
Python学习知识思维导图python基础知识python数据类型条件循环列表元组字典集合字符串序列函数面向对象编程模块错误异常文件对象#python##python自学##编程#...
- 别找了!288页Python核心知识笔记(附思维导图，建议收藏)
-
今天就给大家分享一份288页Python核心知识笔记，相较于部分朋友乱糟糟的笔记，这份笔记更够系统地总结相关知识，巩固Python知识体系。文末获取完整版PDF该笔记学习思维导图：目录内容展示【领取方...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 每天一个 Python 库:datetime 模块全攻略，时间操作太丝滑!
- 字节跳动!2023全套Python入门笔记合集
- 为什么你觉得Matplotlib用起来困难?因为你还没看过这个思维导图
- Python新手必看!30分钟搞懂break/continue(附5个实战案例)
- 刘心向学(24)Python中的数据类（python中5种简单的数据类型）
- 刘心向学(25)Python中的虚拟环境（python虚拟环境安装和配置）
- 栋察宇宙(八):Python 中的 wordcloud 库学习介绍
- AI在用|ChatGPT、Claude 3助攻，1分钟GET高颜值思维导图
- 使用DeepSeek + Python开发AI思维导图应用，非常强!
- 10幅思维导图告诉你 - Python 核心知识体系
- 标签列表
-
- python计时 (54)
- python安装路径 (54)
- python类型转换 (75)
- python进度条 (54)
- python的for循环 (56)
- python串口编程 (60)
- python写入txt (51)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python字典增加键值对 (53)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python qt (52)
- python人脸识别 (54)
- python斐波那契数列 (51)
- python多态 (60)
- python命令行参数 (53)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- centos7安装python (53)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)