首页 > flask生产的html页面在本地加载css效果正常,部署到阿里云上就页面效果异常。

flask生产的html页面在本地加载css效果正常,部署到阿里云上就页面效果异常。

这个项目很简单,用的是flask-bootstap.flask生成html后扔给浏览器显示。

我在本地计算机上,各种功能都很顺利。页面效果如这个:
http://chuantu.biz/t5/30/1472...

但是当我把这个APP部署在阿里云上后,浏览器的css效果好像无法加载,只能显示最简单的html文字格式。
页面效果如这个:
http://chuantu.biz/t5/30/1472...

原因分析:
1 从浏览器显示来看,可能是css没有加载成功。
但是我仔细查看了上面两个网页的html源码,都是一样的啊。

2 我查看了下flask里面的html的css加载方式,在“/templates/base.html”里面:

<link rel="stylesheet" type="text/css"
      href="{{url_for('static', filename='sample-app.css')}}">

---这个google了一圈也没有发现问题。

附从浏览器里面来看的html源码:

<!DOCTYPE html>
<html>
<head>

<title>Sample App for Flask-Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.6.1.dev1" rel="stylesheet">  
<link rel="stylesheet" type="text/css"
      href="/static/sample-app.css">
<!--[if lt IE 9]>
      <script src="/static/html5shiv.min.js"></script>
      <script src="/static/respond.min.js"></script>
<![endif]-->

</head>
<body>
...


或者是服务器设定的问题,我的nginx配置也有问题,静态文件也无法加载。


浏览器调试模式时可以发现,浏览器没有取到这个3个css文件。
我的nginx配置:

location ~^/(images|static|...)/{
          root /home/gogo/iotservice/sample_app;
}

似乎nginx的配置没起作用
浏览器说它要去获取的css文件在:
"http://101.xx.xx.30/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.6.1.dev1"
理论上nginx应该告诉浏览器css文件在:
"101.xx.xx.30/home/gogo/iotservice/sampla_app/static/..."
但实际上浏览器没有去这个地址取css文件。


本地无问题本地用什么服务器测试?原生附带的那个?你部署后用什么服务器运行?原生的能自己找到静态文件的,除非你改了但改了本地也挂了需要另外在蓝图那里设,至于另外的服务器需要自己设置。如果用nginx就用nginx来设置static位置,详情看nginx配置说明去。浏览器打开调试是404还是跨域不能载入css?js可以载入吗?还是浏览器识别错误了css文件类型吗?


是不是,引用文件的路径问题,看看控制台报错没

【热门文章】
【热门文章】