Nginx服务器部署静态网页时如何解决界面布局出乱、或者说加载不了背景的问题

一、问题描述

想要把实验室项目部署到Nginx服务器上进行反向代理调用，先是在本地进行了测试工作，但是打开登录页面后却发生了界面出乱，无法正常显示界面，界面如下图所示，后面在图书馆找了一本由苗泽编著的《Nginx 高性能Web服务器详解》的书仔细阅读了服务器配置内容后，才解决了问题。

二、问题解决步骤

对Nginx服务器的配置实则是对配置文件nginx.conf的配置，该文件有很多部分组成：

• 全局块
• events块
• http块
• server块
• location块

我们针对本博客的问题对location块进行详细解释
首先我们将虚拟主机配置成：

listen 8008;     # 侦听端口
server_name   localhost;         #通过此域名访问虚拟主机 

对于location块来说，基本结构如下：

location  uri       #uri变量是待匹配的请求字符串，也是在浏览器输入url时的路径
{	
	root  根目录    #是指项目文件下的根目录
	index  .html文件   #所要默认打开的界面.html文件
	.     #还有一些其他配置，银与本博客问题无干系，因此不列举出来
	.
	. 
} 

相对于本次问题，我们先来看看第一次是怎么配置的location块：

在上面代码中，login.html是登录页面，浏览器是默认打开的页面，是存放在html/chatbot_knowledge/pages路径下的文件，uri配置成无外加路径，意味着在浏览器输入localhost:8008就可以打开页面，不过显示的是界面布局出乱的问题，现在我们来改一下loctioan块，如图：

在新修改的代码中，将uri改成/chatbot_knowledge/pages 意味着在浏览器输入的url需要添加上才能精准找到项目文件下的login.html，才能打开完整的登录界面，如果你把项目文件夹中login.html单独提出来也是不行的，因为login.html需要在项目其他文件的支持下才能完整打开。
在浏览器输入：

localhost:8008/chatbot_knowledge/pages

三、总结

这个问题困扰了我好久，也在网上直接找了好多解决方法都行不通，最后觉得还是去查找官方书籍针对性的看，理解了才好解决问题。这次问题解决方法看着解决容易，但是由于自己太急躁导致浪费了好多时间在上面，这也是一种经验了。继续努力加油，争取不掉头发！