Nginx部署Vue项目的两种防止404配置

谁借莪１个温暖的怀抱￠ 2022-11-29 03:26 221阅读 0赞

## Nginx部署Vue项目的两种防止404配置 ##

### 文章目录 ###

*   *  Nginx部署Vue项目的两种防止404配置
     *   *  一、配置方式1
         *  二、配置方式2
         *  三、总结

> 背景：前后端分离使用Nginx部署Vue项目，Nginx是基于alpine打出的基础Nginx镜像

### 一、配置方式1 ###

location /projectname { 
            root   /usr/share/nginx/html/;
            index  index.html index.htm;
    		try_files $uri $uri/ /projectname/index.html;
    }

> 一般情况下，在我们进行部署的时候最前端往往是一个高可能的Nginx所有的域名请求都打到这台Nginx，然后下游才是我们真实的部署前端项目的Docker容器，所以最前端的Nginx将静态资源请求代理到我们的前端容器将后端的请求代理到我们后端容器对应的网关上。所以这个地方需要使用projectname来做一个项目级别的区分【如果你没有这个需求不加也无所谓】。

### 二、配置方式2 ###

# Vue路由防止 刷新 404
    location /projectname { 
            root   /usr/share/nginx/html;
            index  index.html;
    		try_files \$uri \$uri/ @router;
    }
    
        location @router { 
            rewrite (static/.*)\$ /projectname/\$1   redirect;
            rewrite ^.*$   /projectname/index.html  last;
        }

>  *  这个地方需要注意一下，就是Linux中的$的转义 要使用 \\ 放在美元符号之前进行转义。
>  *  此外如果你是从Windows中copy过来的一定要注意换行符号的问题 vi之后使用set ff=unix【使用unix换行符】

### 三、总结 ###

1、在测试Nginx配置的时候，如果涉及到多层Nginx代理建议先把内层Nginx调通然后在往外调试，还有可以现在本地Windows环境测试【最好如果有虚拟机用虚拟机没有的话有linux用linux】，

2、如果我们使用RancherUI那么我们可以使用命令行进入到容器内部修改Nginx配置文件然后reload一下，这样可以避免不停的发镜像或chart。