如何在IIS部署的Flask应用中从非/static目录加载JS文件

核心思路 #

放弃依赖Flask全局static_folder配置，为每个自定义资源目录单独注册路由，确保资源请求能被Flask正确处理，同时适配IIS的路径映射规则。

1. 调整Flask路由配置（本地/IIS通用） #

通过send_from_directory为每个需要访问的资源目录单独编写路由，无需修改全局静态目录配置，避免路径冲突。

假设你的项目结构如下：

项目根目录/
├── app.py
├── index.html
├── index.js
└── page1/
    ├── page1.html
    └── page1.js

修改后的app.py代码：

from flask import Flask, send_from_directory

app = Flask(__name__)

# 根页面路由
@app.route("/")
def index():
    return send_from_directory("", "index.html")

# 为根目录下的index.js注册路由
@app.route("/index.js")
def serve_index_js():
    return send_from_directory("", "index.js")

# 为自定义page1目录注册路由，支持访问目录下所有文件
@app.route("/page1/<path:filename>")
def serve_page1_resources(filename):
    return send_from_directory("page1", filename)

if __name__ == '__main__':
    # 本地测试用
    # app.run(debug=True)
    # IIS部署启动配置
    app.run(host="192.168.1.87", port=80)

2. 修改HTML资源引用路径 #

使用绝对路径引用资源，避免相对路径导致的层级解析错误：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 300px; height: 300px; background-color: red;" id="testDiv"></div>
    <!-- 直接用路由注册的绝对路径 -->
    <script src="/index.js"></script>
</body>
</html>

3. IIS部署额外配置 #

如果使用wfastcgi部署，检查web.config确保所有请求都转发给Flask处理，避免IIS拦截自定义资源请求：

<configuration>
  <system.webServer>
    <handlers>
      <add name="Python FastCGI" path="*" verb="*" modules="FastCgiModule" 
           scriptProcessor="你的Python安装路径\python.exe|你的Python安装路径\Lib\site-packages\wfastcgi.py" 
           resourceType="Unspecified" requireAccess="Script" />
    </handlers>
  </system.webServer>
  <appSettings>
    <add key="WSGI_HANDLER" value="app.app" />
    <add key="PYTHONPATH" value="你的项目根目录绝对路径" />
  </appSettings>
</configuration>

同时确保IIS应用程序池对项目根目录及所有自定义资源目录有读取权限。

失效原因分析 #

• 修改全局static_folder时，Flask会将该目录作为唯一静态资源根，但你直接返回根目录的index.html时，相对路径会解析到错误层级，导致404
• 仅为页面注册send_from_directory路由，但未为资源文件注册对应路由，Flask无法识别资源请求
• IIS环境下若web.config仅配置特定路径转发，自定义资源请求会被IIS直接拦截，无法到达Flask

内容的提问来源于stack exchange，提问作者HereForABit