dockerfile解决nignx镜像部署vue刷新404

Trank-Lw

已于 2022-05-25 08:23:55 修改

阅读量980

点赞数

分类专栏： Docker 文章标签： vue.js nginx 前端 docker

于 2022-05-24 14:44:45 首次发布

本文链接：https://blog.youkuaiyun.com/controller_Lw/article/details/124946550

版权

Docker 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了在Docker环境下，如何通过配置Nginx解决Vue应用刷新页面出现404错误的问题。提供了三种不同的Nginx配置方案，包括设置try_files和rewrite规则来确保在history模式下正确重定向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

由于安全问题，客户现场的同事部署的Docker环境，nginx部署vue刷新404，这个问题在nginx 修改配置文件很简单的问题，由于本人也没有真正的接触过docker，我们这个边提出让他修改nginx的config 配置，对方提出修改docker 去解决这个问题。
一下是解决方案，我也是刚接触docker文件，先模仿学习，等以后经验多一点在分享个人想法。
https://blog.youkuaiyun.com/qq1304530241/article/details/123820143

FROM nginx:latest
MAINTAINER iron.guo
VOLUME /tmp
ENV LANG en_US.UTF-8
RUN echo "server {  \
                    listen       80; \
                    #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题 \
                    location / { \
                        root   /var/www/html/; \
                        index  index.html index.htm; \
                        if (!-e \$request_filename) { \
                            rewrite ^(.*)\$ /index.html?s=\$1 last; \
                            break; \
                        } \
                    } \
                    access_log  /var/log/nginx/access.log ; \
                } " > /etc/nginx/conf.d/default.conf \
    &&  mkdir  -p  /var/www \
    &&  mkdir -p /var/www/html

ADD ./ /var/www/html/
EXPOSE 80

1.nginx解决刷新404


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 500 502 503 504 /50x.html;
			location = /50x.html {
			root html;
		}
	}
}

2.nginx解决刷新404


server
{
    listen 80;
    server_name testwx.wangshibo.com;
 
    #vue-router配置
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }

3.nginx解决刷新404

server {  
                    listen       80; 
                    #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题 
                    location / { 
                        root   /var/www/html/; 
                        index  index.html index.htm; 
                       	if (!-e $request_filename) {
          					rewrite ^(.*)$ /index.html?s=$1 last;
          					break;
      					}
                    } 
                    access_log  /var/log/nginx/access.log ; 
                }