Flask应用中无法导入JavaScript文件，咨询正确实现方案

看起来你踩了Flask静态文件约定的坑——首先得明确：Flask默认把静态资源（JS、CSS、图片等）放在static目录下，而不是templates文件夹里。你的当前结构把JS/CSS放在templates里，这是导致url_for报错的核心原因。

第一步：调整目录结构 #

把app/templates/js和app/templates/css整个移动到app/static目录下，最终结构应该是：

README
config.py
run.py
setup.py
app/
  blueprint_1/
  blueprint_2/
  static/
    js/
      myScript.js
    css/
      styles.css
  templates/
    base.html
    index.html
  __init__.py

第二步：在模板中正确引用静态文件 #

Flask内置了static这个端点，专门用来生成静态文件的URL。你只需要在模板里这样写：

<!-- 引入JS -->
<script type="text/javascript" src="{{ url_for('static', filename='js/myScript.js') }}"></script>

<!-- 引入CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

为什么之前的方法无效？ #

• 你用url_for('js', ...)的时候，Flask找不到名为js的端点——这个端点根本不存在，Flask只默认提供static端点处理静态资源。
• 把静态文件放在templates里是错误的，templates文件夹是用来存放Jinja2模板文件的，Flask不会把这里的文件当作静态资源处理。

如果你非要自定义静态文件夹路径（不推荐） #

如果因为特殊需求，必须把静态资源放在templates里，那可以在初始化Flask app的时候指定static_folder参数：

# app/__init__.py
from flask import Flask

# 指定静态文件夹为templates
app = Flask(__name__, static_folder='templates')

这时候模板里依然用url_for('static', filename='js/myScript.js')就能访问到，但这种做法混淆了模板和静态资源的职责，容易造成维护混乱，非常不建议。

确认你的run.py和app初始化没问题 #

确保你的run.py是正确导入并运行app的：

# run.py
from app import app

if __name__ == '__main__':
    app.run(debug=True)

按照上面的步骤调整后，应该就能正常加载JS和CSS文件了。

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