Flask项目中setup.js加载失败，请求排查解决方案

加载页面时提示setup.js未找到，项目结构、相关代码如下：

项目结构 #

drwxr-xr-x  3 usertest  staff       96 Dec  7 18:02 img
-rw-r--r--@ 1 usertest  staff     1075 Dec 11 11:58 index.html
-rw-r--r--  1 usertest  staff      561 Dec 11 11:55 main.py
-rw-r--r--  1 usertest  staff     2631 Dec 11 11:25 setup.js

index.html代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chessboard Example</title>
    <!-- Include chess.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>

    <!-- Include chessboard.js -->
    <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>

    <!-- Include the external JavaScript file -->
    <script type="text/javascript" src="setup.js"></script>
</head>
<body>
    <div id="board1" style="width: 400px"></div>
    <!-- Buttons for interacting with the chessboard -->
    <button id="startBtn">Start Position</button>
    <button id="clearBtn">Clear Board</button>
    <button id="undoBtn">Undo Move</button>
    <button id="moveBtn">Next best move</button>

</body>
</html>

main.py代码 #

from flask import Flask, render_template


flask_app = Flask(__name__, template_folder='')


@flask_app.route('/')
def chess_index(): 
    return render_template('index.html')


if __name__ == '__main__':
    flask_app.run(host='0.0.0.0', port=5000, debug=True)

问题原因 #

Flask默认仅将static文件夹作为静态资源目录，你当前把setup.js放在根目录，且未配置Flask识别根目录为静态资源路径，因此模板渲染后，浏览器无法从服务器获取到setup.js文件。

解决方法 #

方法一：修改Flask配置，将根目录设为静态文件夹

修改main.py中的Flask初始化代码，添加static_folder=''参数，让Flask将根目录作为静态资源目录：

from flask import Flask, render_template

flask_app = Flask(__name__, template_folder='', static_folder='')

@flask_app.route('/')
def chess_index(): 
    return render_template('index.html')

if __name__ == '__main__':
    flask_app.run(host='0.0.0.0', port=5000, debug=True)

方法二：遵循Flask规范，迁移静态资源

1. 在项目根目录创建static文件夹，将setup.js和img文件夹移入其中。
2. 修改index.html中setup.js的引用路径，使用Flask的url_for方法生成正确的静态资源链接：

<script type="text/javascript" src="{{ url_for('static', filename='setup.js') }}"></script>

3. 由于chessboard.js需要访问棋子图片，需在setup.js中配置pieceTheme路径，指向static下的img目录：

var board = Chessboard('board1', {
  pieceTheme: '/static/img/{piece}.png',
  // 其他配置项
});

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