网站首页 > 精选文章 正文
将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;
}
}
- 上一篇: vue-router 4 你真的熟练吗?
- 下一篇: Vue3.0权限管理实现流程【实践】
猜你喜欢
- 2024-12-29 前端vue与后端Thinkphp在服务器的部署
- 2024-12-29 第03节:创建登陆页
- 2024-12-29 详解Nginx代理Vue3项目的实践与配置
- 2024-12-29 React/Vue路由全攻略:鉴权、导航守卫与拦截,让你站在技术之巅
- 2024-12-29 Vue3.2项目架构详解
- 2024-12-29 vue项目本地开发完成后部署到服务器后报404是什么原因呢?
- 2024-12-29 Vue路由配置方法详细介绍
- 2024-12-29 vue 路由守卫
- 2024-12-29 React 对比 Vue 如何做路由鉴权?
- 2024-12-29 vue3 动态组件使用技巧
- 最近发表
- 标签列表
-
- 向日葵无法连接服务器 (32)
- git.exe (33)
- vscode更新 (34)
- dev c (33)
- git ignore命令 (32)
- gitlab提交代码步骤 (37)
- java update (36)
- vue debug (34)
- vue blur (32)
- vscode导入vue项目 (33)
- vue chart (32)
- vue cms (32)
- 大雅数据库 (34)
- 技术迭代 (37)
- 同一局域网 (33)
- github拒绝连接 (33)
- vscode php插件 (32)
- vue注释快捷键 (32)
- linux ssr (33)
- 微端服务器 (35)
- 导航猫 (32)
- 获取当前时间年月日 (33)
- stp软件 (33)
- http下载文件 (33)
- linux bt下载 (33)