前言：最近在Nginx上部署Vue项目，同时还存了一些静态资源，但我查了好久都没找到一篇详细介绍路径配置的文章，因此就根据我有限的经验写了这篇文章，希望能够对读者有所帮助
详解server中各部分作用及如何配置
如下图所示，这是我配置好的一个server代码块，我这里配置了https，所以会比默认的多一部分内容，如果你只需要配置http，则只需关注红色方框的部分即可，下面会按顺序讲解。
①listen项
用来配置端口号的，常见端口号如 http 是80端口， https 是443端口，如图所示，可以配置多个端口，表示通过这些端口都可以请求到。
注意事项：
如果是80端口或443端口，是不需要写在路径中的，因为完整路径前的http或https就表明了端口；
但如果配置了静态资源是其他端口，如 8080 端口，则需要在访问时加上端口号才能请求到
例子：
配置文件：
访问路径：
②server_name项
如果要配置域名就写域名，没有域名就写localhost，这一项决定了访问路径中的协议和端口之间的内容，也就是下图的内容（我这里配置了域名）
如果写的是localhost，则可以在路径上通过 部署到的电脑的IP地址 进行访问，就是把上图的域名替换为ip地址进行请求
③location 后的路径项
这一项决定了访问路径的填写和访问到的资源路径两方面，后者一般需要和第④项结合着理解，一下还会提及
简单而言，我推荐的写法是 “/+你想写的符号”，如下：
这里的rotograph就是 “你想写的符号”
而这个符号决定了访问路径，如按上图，那么我的访问路径就是
也就是说这个符号在访问路径中处于端口号的后面，而其所访问的就是你设置所指向的资源，第④项会说的。
注意事项：
那么当我们不写符号时，也就是 location / 这样，则在访问路径的端口号后不需要任何东西就可以访问到指定的资源，就是通常理解的“首页”
而如果我们配置了多个location块，而其后的符号都是相同的，这时会遵循长路径优先匹配原则，也就是输入网址，会优先匹配到指定资源路径更长的那个
④root 项
这一项填写的是根路径，其实还有另外一项，叫 alias，它们的区别可以见 root和alias的区别 这篇文章（不保真）。
这里主要说一下root，它会结合第③项配置的路径，从而得到指定要访问的资源路径的真实地址。
例子：
那么，我想通过 http://xxx:端口名/rotograph 这个路径来访问这个资源怎么办？
将根路径设置成 /usr/show 即可，这里千万注意不要漏掉前面的 /，写成 usr/show是不对的。
注意事项：
如果我们在root项中前面没有写 /（默认的就没写），那么会访问到哪里呢？
其实Nginx有一个默认站点目录，一般为 /usr/share/nginx/html ，所以你将默认的文件中的html改成这个路径，也会返回Nginx的那个页面，我猜测，如果不写 /，那么所有root后的配置路径在访问时都会在前面被拼接一个 /usr/share/nginx/，如下所示：
这个配置路径前没有 / ，那么其访问的真实资源地址就是下图红框中的地址
所以，如果我们想把项目部署到别的目录，那么配置root项时路径前一定要加 / ！
如下：
这样配置，就只需将项目部署到如下地址 /webapp/vue1中即可。
⑤index项
这一项最简单，就是定位到指定资源目录后，你想展示那个文件，如我设置 index.html就展示名为 index.html的文件，我也可以设置成 pic1.jpg，那么就展示一张图片
注意事项：
配置到index项的文件是不需要在路径中写出的，会自动展示，如下：
配置：
访问效果：
后记
综上，只要给出想要访问的资源，那么就很容易配置location块，只需要将指定资源地址合理划分就能得到第③项和第④项了，如下：
将红色框中路径作为root项，将黄色框中/img作为location后的路径项，就可以轻松通过 http://ip地址:端口号/img访问到该目录啦~
以上就是这篇文章的全部内容了，希望能够对你有所帮助，如果你喜欢这篇文章的话，求赞、求收藏、求评论、求分享，最重要的是点一个大大的关注，各位的支持就是我写博客的最大动力，ok各位，我们下篇再见！
