Docker部署Vue项目404问题

最新推荐文章于 2024-07-25 15:48:40 发布

富贵er

最新推荐文章于 2024-07-25 15:48:40 发布

阅读量2.4k

点赞数 1

文章标签： docker nginx vue

本文链接：https://blog.csdn.net/weixin_44355908/article/details/108726627

版权

这个404页面是nginx缺省的，并不是自己vue项目的，网上查阅资料后搞定问题，记录一下
在这里插入图片描述
原因
刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。如上的404现象，是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在，这些访问资源都是在js里渲染的
Dockerfile

# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了
FROM nginx
# 定义作者
MAINTAINER Abc
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 拷贝.conf文件到镜像下，替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf

Nginx.conf
通过Dockerfile构建镜像容器时将nginx.conf配置文件替换

worker_processes auto;

events {
    worker_connections 1024;
}

http {
 include             mime.types;

 default_type        application/octet-stream;

 sendfile            on;

 keepalive_timeout 65;

 client_max_body_size 20m;

    server {
        listen       80;
        server_name  localhost;
        location / {
			root /usr/share/nginx/html; #配置Vue项目根路径,与
			index index.html index.html; #配置首页
			try_files $uri $uri/ /index.html; #防止刷新报404
        }

        #error_page 404 /404.html;
            #location = /40x.html {
        #}

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
			root html;
        }
    }
 }