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

最新推荐文章于 2024-06-26 07:29:28 发布

斜杠青年//

最新推荐文章于 2024-06-26 07:29:28 发布

阅读量3.5k

点赞数 4

分类专栏： Nginx 文章标签： Nginx

本文链接：https://blog.csdn.net/qq_38796548/article/details/102533093

版权

Nginx 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、问题描述

想要把实验室项目部署到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需要在项目其他文件的支持下才能完整打开。
在浏览器输入：