当直接打开时，我的html文件将加载我的OpenLayers JavaScript文件(加载地图框架(。然而，当我从Flask python应用程序运行html时，JavaScript文件/对象不会加载(没有显示地图，只有一些标题文本(。
这个问题似乎在这里排序：
在Flask 上运行时未添加外部JavaScript文件
然而，由于我的文件夹结构，我似乎无法加载.js。没有错误，只是页面中没有加载地图。我想我需要一些关于"静态"引用语法的帮助。我认为这就是问题所在，但我对网站建设还很陌生。这是我的项目文件夹结构：
ol_app.py
/pages
olquickstart.html
/static
/scripts
ol_script.js
/libs
/v6.3.1-dist
ol.css
ol.css.map
ol.js
ol.js.map
我的Flask python应用程序：
from flask import Flask, render_template
import os
import webbrowser
from threading import Timer
template_dir = os.path.abspath(r'D:PathToProjectol_quickstartpages')
app = Flask(__name__, template_folder=template_dir)
#home page
@app.route('/')
def index():
return '<a href="http://127.0.0.1:5000/ol_qs">OL QuickStart</a>'
#openlayers test page
@app.route('/ol_qs')
def ol_qs():
return render_template("olquickstart.html")
#run app
def open_browser():
webbrowser.open_new('http://127.0.0.1:5000/')
if __name__ == "__main__":
Timer(1, open_browser).start();
app.run(port=5000)
我的html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../libs/v6.3.1-dist/ol.css" type="text/css">
<style>
.map {
height: 900px;
width: 100%;
}
</style>
<script src="../libs/v6.3.1-dist/ol.js"></script>
<title>OpenLayers Quickstart</title>
</head>
<body>
<h2>OL Quickstart Map</h2>
<div id="js-map" class="map"></div>
<!-- <script src='../static/scripts/ol_script.js'></script> I USE THIS LINE WHEN OPENING THE HTML DIRECTLY WITHOUT FLASK-->
<script type="text/javascript"
src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
</body>
</html>
这部分是问题所在吗？
<script type="text/javascript"
src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
看起来您需要将libs目录移动到static中，然后包含那些具有与现有类似url_for功能的文件：
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='libs/v6.3.1-dist/ol.css') }}">
<script type="text/javascript"
src="{{ url_for('static', filename='libs/v6.3.1-dist/ol.js') }}"></script>
你现有的scripts/ol_script.js看起来是正确的。
然而，要自己调试，您应该在Web浏览器中加载开发工具，并查看Network选项卡，以确保每个JS文件都能成功加载，而不会404。
类似地，Console选项卡将显示页面中的任何javascript错误。