vue部署docker下的nginx刷新404问题及解决方案

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue部署docker下的nginx刷新404问题及解决方案，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2833字，纯文字阅读大概需要5分钟。

内容图文

环境描述

本次环境是通过jenkins编译npm run build 或者UMI_ENV=dev umi build 生成dist目录通过Dockerfile build一个新镜像上传私服通过swarm集群service运行镜像，使用与swarm一个net下的nginx代理访问的。

[root@jenkins-master DEV-sk_platform_brand_common]# cat Dockerfile
FROM basic-registry.xxxx.com/skong/nginx
###继承自centos镜像

MAINTAINER waitfish from litx_sean
####创建者信息

COPY publish/ /data/web/
COPY web.conf /data/conf/
COPY run.sh /run.sh

RUN chmod u+x /run.sh
########
########
[root@jenkins-master DEV-sk_platform_brand_common]# cat web.conf
server {
listen 80;
server_name 127.0.0.1;
index index.html;
root /data/web;
access_log logs/web.log;

    location / {
         try_files $uri $uri/ @router;
         index index.html;
     }

    location @router {
        rewrite ^.*$ /index.html last;
    }

}
########
########
[root@jenkins-master DEV-sk_platform_brand_common]# cat run.sh
#!/bin/bash
source /etc/profile
if [ -n "$ENV" ]
then
sed -i s/^global.serverCd.*/"global.serverCd = '$ENV'"/g /data/web/config.js
fi
/data/nginx/sbin/nginx && tail -f /data/nginx/logs/error.log
[root@jenkins-master DEV-sk_platform_brand_common]#

########
#
#
docker build -t registry.xxxx.com/sk_platform_brand_common_dev:master .
#
#
docker service create --name sk_platform_brand_common_dev --hostname sk_platform_brand_common_dev --network sk-net registry.xxxx.com/sk_platform_brand_common_dev:masterr
#
#

########
swarm集群对外开放的nginx配置

server {
listen 80;
server_name dev-brand2.xxxx.com;
location / {
proxy_pass http://sk_platform_brand_common_dev;
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
access_log logs/sk_platform_brand_common_dev.log;
}
#
#
docker restart nginx``

1.问题：

使用Vue.js框架，利用vue-route结合webpack编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象。

2.原因：

刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的。
服务端nginx的一开始配置如下（假设域名为：flymoth.com）：
server {
listen 80;
server_name 127.0.0.1;
index index.html;
root /data/web;
access_log logs/web.log;

如上出现404的原因是由于在这个域名根目录/Data/app/xqsj_wx/dist下面压根就没有loading这个真实目录存在。

3.解决方案

在nginx配置里添加vue-route的跳转设置（这里首页是index.html，如果是index.php就在下面对应位置替换），正确配置如下：
server {
listen 80;
server_name 127.0.0.1;
index index.html;
root /data/web;
access_log logs/web.log;

            //以下为新添加的

    location / {
         try_files $uri $uri/ @router;
         index index.html;
     }

    location @router {
        rewrite ^.*$ /index.html last;
    }

}

内容总结

以上是互联网集市为您收集整理的vue部署docker下的nginx刷新404问题及解决方案全部内容，希望文章能够帮你解决vue部署docker下的nginx刷新404问题及解决方案所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---