在本次使用nginx发布vue项目遇到 配置location 始终404 和 在项目子目录点击浏览器刷新出现404问题

使用nginx发布vue项目，为了方便测试就下载了一个nginx 放置自己目录下

nginx目录是这样的

一、配置端口

然后打开conf / nginx.conf 配置 server，首选监听808 设置服务名

  listen       808;  server_name  localhost;

二、配置项目根目录

  index index.html index.htm index.php;    root  /YLKJPro/leshan_integrate_manage/dist;    #这个是直接指向我的D盘下的项目目录

三、location URL匹配配置

要进行location 的配置首选要了解 nginx 子目录匹配规则(减少不必要的时间成本)

看官方案例：

  location / {        root /data/www;    }

配置分解~~

当访问http://127.0.0.1/时,会匹配/data/www

当访问http://127.0.0.1/images时,会匹配/data/www/images

当访问http://127.0.0.1/images/1.jpg时,会匹配/data/www/images/1.jpg

也就是说,地址栏里"/"后的路径是直接匹配目录data/www/下的路径

根据如上案例 我项目location 配置如下

  location /dist/{     root /YLKJPro/leshan_integrate_manage;  }

根据如上配置~

访问http://127.0.0.1/dist/时,会匹配/YLKJPro/leshan_integrate_manage/dist

也就是说,地址栏里/dist,直接匹配了/YLKJPro/leshan_integrate_manage的子目录dist

经常出问题的是, location里的url随意配了一个名字,如/xxx，
但是对应的/YLKJPro/leshan_integrate_manage目录
下并没有该/YLKJPro/leshan_integrate_manage/xxx子目录，一访问就404

还有个是重复路径配置

server {      location / {          root /data/www;      }        location /images/ {          root /data;      }  }

访问URL http://localhost/images/example.png，将会匹配第二个/images/规则，

虽然也可以匹配location /规则，但nginx默认会选择最长前缀去匹配当前URL，也就是
第二个配置会生效，访问/data/images/目录，而不是/data/www/images/目录

Serving Static Content

引用官方解释

  An important web server task is serving out files (such as images or static HTML pages). You will implement an example where, depending on the request, files will be served from different local directories: /data/www (which may contain HTML files) and /data/images (containing images). This will require editing of the configuration file and setting up of a server block inside the http block with two location blocks.    First, create the /data/www directory and put an index.html file with any text content into it and create the /data/images directory and place some images in it.    Next, open the configuration file. The default configuration file already includes several examples of the server block, mostly commented out. For now comment out all such blocks and start a new server block:    http {      server {      }  }  Generally, the configuration file may include several server blocks distinguished by ports on which they listen to and by server names. Once nginx decides which server processes a request, it tests the URI specified in the request’s header against the parameters of the location directives defined inside the server block.    Add the following location block to the server block:    location / {      root /data/www;  }  This location block specifies the “/” prefix compared with the URI from the request. For matching requests, the URI will be added to the path specified in the root directive, that is, to /data/www, to form the path to the requested file on the local file system. If there are several matching location blocks nginx selects the one with the longest prefix. The location block above provides the shortest prefix, of length one, and so only if all other location blocks fail to provide a match, this block will be used.    Next, add the second location block:    location /images/ {      root /data;  }  It will be a match for requests starting with /images/ (location / also matches such requests, but has shorter prefix).    The resulting configuration of the server block should look like this:    server {      location / {          root /data/www;      }        location /images/ {          root /data;      }  }  This is already a working configuration of a server that listens on the standard port 80 and is accessible on the local machine at http://localhost/. In response to requests with URIs starting with /images/, the server will send files from the /data/images directory. For example, in response to the http://localhost/images/example.png request nginx will send the /data/images/example.png file. If such file does not exist, nginx will send a response indicating the 404 error. Requests with URIs not starting with /images/ will be mapped onto the /data/www directory. For example, in response to the http://localhost/some/example.html request nginx will send the /data/www/some/example.html file.    To apply the new configuration, start nginx if it is not yet started or send the reload signal to the nginx’s master process, by executing:    nginx -s reload  In case something does not work as expected, you may try to find out the reason in access.log and error.log files in the directory /usr/local/nginx/logs or /var/log/nginx.  Setting Up a Simple Proxy Server  One of the frequent uses of nginx is setting it up as a proxy server, which means a server that receives requests, passes them to the proxied servers, retrieves responses from them, and sends them to the clients.    We will configure a basic proxy server, which serves requests of images with files from the local directory and sends all other requests to a proxied server. In this example, both servers will be defined on a single nginx instance.    First, define the proxied server by adding one more server block to the nginx’s configuration file with the following contents:    server {      listen 8080;      root /data/up1;        location / {      }  }  This will be a simple server that listens on the port 8080 (previously, the listen directive has not been specified since the standard port 80 was used) and maps all requests to the /data/up1 directory on the local file system. Create this directory and put the index.html file into it. Note that the root directive is placed in the server context. Such root directive is used when the location block selected for serving a request does not include own root directive.    Next, use the server configuration from the previous section and modify it to make it a proxy server configuration. In the first location block, put the proxy_pass directive with the protocol, name and port of the proxied server specified in the parameter (in our case, it is http://localhost:8080):    server {      location / {          proxy_pass http://localhost:8080;      }        location /images/ {          root /data;      }  }  We will modify the second location block, which currently maps requests with the /images/ prefix to the files under the /data/images directory, to make it match the requests of images with typical file extensions. The modified location block looks like this:    location ~ \.(gif|jpg|png)$ {      root /data/images;  }  The parameter is a regular expression matching all URIs ending with .gif, .jpg, or .png. A regular expression should be preceded with ~. The corresponding requests will be mapped to the /data/images directory.    When nginx selects a location block to serve a request it first checks location directives that specify prefixes, remembering location with the longest prefix, and then checks regular expressions. If there is a match with a regular expression, nginx picks this location or, otherwise, it picks the one remembered earlier.    The resulting configuration of a proxy server will look like this:    server {      location / {          proxy_pass http://localhost:8080/;      }        location ~ \.(gif|jpg|png)$ {          root /data/images;      }  }  This server will filter requests ending with .gif, .jpg, or .png and map them to the /data/images directory (by adding URI to the root directive’s parameter) and pass all other requests to the proxied server configured above.    To apply new configuration, send the reload signal to nginx as described in the previous sections.    There are many more directives that may be used to further configure a proxy connection.

四、子目录页面刷新404

经过上面一系列的nginx配置现在可以访问了，但是在项目的子路由下刷新页面出现了404，这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

这个在最初也是困惑许久，最后经过一番折腾，最后使用try_files总算解决了，在nginx中新增如下配置

    location / {             try_files $uri $uri/ @router; #检测文件存在性重定向到首页目录    防止404             index  index.html;     }     location @router {             rewrite ^.*$ /index.html last;     }

再来看看一个案例对try_files 的解释

  location / {      try_files $uri $uri/ /index.php?$query_string;    }

当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。

try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example(其中 $root 是项目代码安装目录)的文件，就直接把这个文件的内容发送给用户。

显然，目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录。

又找不到，就会 fall back 到 try_files 的最后一个选项 /index.php，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php。

五、完整nginx 配置

最后nginx server完整配置如下

   server {        listen       808;        server_name  localhost;        #charset koi8-r;        #access_log  logs/host.access.log  main;    index index.html index.htm index.php;        root  /YLKJPro/leshan_integrate_manage/dist;    #你打包项目存放的位置        location / {                try_files $uri $uri/ @router; #检测文件存在性重定向到首页目录    防止404                index  index.html;        }        location @router {                rewrite ^.*$ /index.html last;        }    location /dist/{      root /YLKJPro/leshan_integrate_manage;    }    # 本地瓦片配置        location /arcgis_vector_leshan/{            root   html;        }       }

原文：https://www.cnblogs.com/weifeng1463/p/7353710.html

想要获取学习实战、高并发、架构 、笔试面试资料请扫码咨询+薇薇微信