Flask应用引入jQuery及本地JavaScript文件报404错误如何解决？

Flask引入JS文件报404错误解决方案 #

问题根因 #

Flask框架默认仅将项目根目录下的static文件夹作为静态资源目录对外开放访问，templates文件夹仅用于存放HTML模板，无法直接对外提供静态资源访问。你当前的JS文件存放路径不符合Flask的静态资源规则，因此路由匹配失败返回404。

解决步骤 #

• 调整文件结构：在static文件夹下新建js子目录，将main.js移动到static/js/路径下，最终结构参考：

项目根目录
├── app.py（Flask启动文件）
├── templates
│   └── index.html
└── static
    ├── css（你之前可正常访问的CSS文件存放于此）
    └── js
        └── main.js

• 修改HTML中的JS引用路径，优先使用Flask提供的url_for模板函数生成正确路径：

<script src="{{ url_for('static', filename='js/main.js') }}"></script>

如果不使用模板函数，也可以直接写绝对路径：

<script src="/static/js/main.js"></script>

• 重启Flask服务后刷新页面验证即可，p标签会按照jQuery逻辑正常隐藏，控制台不会再报404错误。

报错信息中文翻译 #

你看到的英文报错GET http://<你的访问地址>/js/main.js net::ERR_ABORTED 404 (NOT FOUND)，对应中文为：请求资源 http://<你的访问地址>/js/main.js 被中断，状态码404（未找到对应资源）

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