Flask应用问题：独立文件夹下HTML无法关联CSS与JavaScript

云上老周

2026-7-10

问题解决方法

核心问题

你的Flask应用无法加载静态文件和正确渲染模板，根源是app实例未正确指定模板与静态文件的路径：

backend.py位于project_folder/backend/目录下，Flask默认会在backend/templates和backend/static中查找文件，但你的模板、静态文件实际在项目根目录的templates/和static/中。
render_template('templates/index.html')的路径写法错误，Flask会将其解析为backend/templates/templates/index.html，自然找不到目标文件。

修正步骤

修改Flask app初始化参数，明确指定模板和静态文件的位置（相对于backend.py的上级目录）：

app = Flask(__name__, template_folder='../templates', static_folder='../static')

修正render_template的调用，直接传入模板文件名即可：

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

完整修正后的backend.py代码

from flask import Flask, render_template, request, jsonify
from flask_cors import CORS
import openai
from openai.error import OpenAIError
import json
import re

# 指定模板和静态文件的路径
app = Flask(__name__, template_folder='../templates', static_folder='../static')
CORS(app)

openai.api_key = ""

@app.route('/')
def index():
    # 直接传入模板文件名
    return render_template('index.html')

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