这次使用nginx发布vue项目时，配置位置一直是404，在项目子目录下点击浏览器刷新出现404的问题。使用nginx发布vue项目，为了测试方便，我下载了一个nginx放在自己的目录下nginx目录下是这样的1.配置端口然后打开conf/nginx.conf配置服务器，最好监听808，设置服务名listen808；服务器名称本地主机；2.配置项目根目录indexindex.htmlindex.htmindex.php；root/YLKJPro/leshan_integrate_manage/dist;#这里是直接指向我D盘下的项目目录3.locationURL匹配配置location配置首选是了解nginx子目录匹配规则（减少不必要的时间成本）看官方案例：location/{root/数据/万维网；}配置分解~~访问http://127.0.0.1/时会匹配/da...访问http://127.0.0.1/images时会..访问http://127.0.0.1时/images/1.jpg...也就是说地址栏“/”后的路径直接匹配目录data/www/下的路径根据上面的情况，我的项目位置配置如下location/dist/{root/YLKJPro/leshan_integrate_manage;}按照上面的配置~在访问http://127.0.0.1/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;}位置/图像/{r根/数据；}}访问URLhttp://localhost/images/examp...将匹配第二个/images/规则。虽然也可以匹配location/rule，但是nginx默认会选择最长的前缀匹配当前的url，即第二次配置生效，访问/data/images/目录，而不是/data/www/images/目录ServingStaticContent引用官方解释Web服务器的一项重要任务是提供文件（例如图像或静态HTML页面）。您将实现一个示例，根据请求，文件将从不同的本地目录提供：/data/www（可能包含HTML文件）和/data/images（包含图像）。这将需要编辑配置文件并在带有两个位置块的http块内设置服务器块。首先，创建/data/www目录并将包含任何文本内容的index.html文件放入其中，然后创建/data/images目录并在其中放置一些图像。接下来，打开配置文件。默认配置文件已经包含了服务器块的几个示例，大部分都被注释掉了。现在注释掉所有这样的块然后启动一个新的服务器块：http{server{}}通常，配置文件可能包括几个服务器块，这些服务器块通过它们侦听的端口和服务器名称来区分。一旦nginx决定哪个服务器处理请求，它就会根据服务器块内定义的位置指令的参数测试请求标头中指定的URI。将以下位置块添加到服务器块：location/{root/data/www;与请求中的URI相比，此位置块指定“/”前缀。对于匹配的请求，URI会被添加到root指令中指定的路径，即/data/www，形成请求文件在本地文件系统的路径。如果有多个匹配的位置块，nginx会选择前缀最长的那个。上面的位置块提供了最短的前缀，长度为1，因此只有当所有其他位置块都无法提供匹配时，这个blo将使用ck。接下来，添加第二个位置块：location/images/{root/data;它将匹配以/images/开头的请求（location/也匹配此类请求，但前缀较短）。服务器块的最终配置应如下所示：server{location/{root/data/www;}位置/图像/{根/数据；这已经是在标准端口80上侦听的服务器的工作配置，并且可以在本地计算机上访问http://localhost/。为响应URI以/images/开头的请求，服务器将从/data/images目录发送文件。例如，为了响应http://localhost/images/example.png请求，nginx将发送/data/images/example.png文件。如果该文件不存在，nginx将发送一个响应指示404错误。URI不以/images/开头的请求将映射到/data/www目录。例如，为了响应http://localhost/some/example.html请求nginx将发送/data/www/some/example.html文件。要应用新配置，启动nginx（如果尚未启动）或向nginx的主进程发送重新加载信号，执行：nginx-sreload如果某些事情没有按预期工作，您可以尝试找出原因/usr/local/nginx/logs或/var/log/nginx目录下的access.log和error.log文件。设置一个简单的代理服务器nginx的常见用途之一是将其设置为代理服务器，这意味着服务器接收请求，将它们传递给代理服务器，从中检索响应，并将它们发送给客户端。我们将配置一个基本的代理服务器，它使用本地目录中的文件处理图像请求，并将所有其他请求发送到代理服务器。在此示例中，两个服务器都将在单个nginx实例上定义。首先，通过添加一个s来定义代理服务器erver块到nginx的配置文件，内容如下：server{listen8080;根目录/数据/up1；location/{}}这将是一个简单的服务器，它侦听端口8080（之前，由于使用了标准端口80，因此未指定listen指令）并将所有请求映射到本地文件上的/data/up1目录系统。创建此目录并将index.html文件放入其中。请注意，root指令位于服务器上下文中。Suchrootdirectiveisusedwhenthelocationblockselectedforservingarequestdoesnotincludeownrootdirective.接下来，使用上一节中的服务器配置并将其修改为代理服务器配置。在第一个location块中，将proxy_pass指令与参数中指定的代理服务器的协议、名称和端口放在一起（在我们的例子中，它是http://localhost:8080）：server{location/{proxy_passhttp://本地主机：8080；}位置/图像/{根/数据；我们将修改第二个位置块，它当前将带有/images/前缀的请求映射到/data/images目录下的文件，以使其匹配具有典型文件扩展名的图像请求。修改后的位置块如下所示：location~.(gif|jpg|png)${root/data/images;}该参数是匹配所有以.gif、.jpg或.png结尾的URI的正则表达式。正则表达式应以~开头。相应的请求将被映射到/data/images目录。当nginx选择一个位置块来为请求提供服务时，它首先检查指定前缀的位置指令，记住具有最长前缀的位置，然后检查正则表达式。如果与正则表达式匹配，nginx会选择这个位置，否则，它会选择之前记住的位置。代理服务器的最终配置如下所示：server{l位置/{proxy_passhttp://localhost:8080/;}位置~.(gif|jpg|png)${root/data/images;此服务器将过滤以.gif、.jpg或.png结尾的请求并将它们映射到/data/images目录（通过将URI添加到root指令的参数）并将所有其他请求传递到上面配置的代理服务器。要应用新配置，请按照前面部分所述将重新加载信号发送到nginx。还有更多指令可用于进一步配置代理连接。四、子目录页面刷新404经过上面的一系列nginx配置，现在可以访问了，但是在项目的子路由下刷新页面时出现404，这是因为在刷新页面时访问的资源找不到服务端，因为vue-router设置的路径不是真正的路径，这个一开始也纠结了很久，最后折腾了好久，终于用try_files解决了。nginx新增如下配置location/{try_files$uri$uri/@router;#检测文件是否存在，重定向到主目录，防止404索引index.html;}location@router{重写^.*$/index.htmllast;}再来看一下案例中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/的目录。如果再次找不到，它会回退到try_files/index.php的最后一个选项，并发起一个内部的“子请求”，相当于nginx向http://localhost/index发起一个HTTP请求。PHP。5、完整的nginx配置最后，完整的nginx服务器配置如下server{listen808;服务器名称本地主机；#charsetkoi8-r;#access_log日志/host.access.logmain;indexindex.htmlindex.htmindex.php;root/YLKJPro/leshan_integrate_manage/dist;#你打包的项目存放的位置location/{try_files$uri$uri/@router;#检查文件是否存在，重定向到主目录，防止404索引index.html;}location@router{重写^.*$/index.html最后；}location/dist/{root/YLKJPro/leshan_integrate_manage;}#本地瓦片配置位置/arcgis_vector_leshan/{roothtml;}}
