Flask Flask app无法通过相对路径找到javascript文件

在本文中，我们将介绍Flask框架中的一个常见问题：Flask应用程序无法通过相对路径找到JavaScript文件的解决方法。

阅读更多：Flask 教程

问题描述

当我们在Flask应用程序中使用相对路径引用JavaScript文件时，有时会遇到应用程序无法找到该文件的问题。这可能是因为相对路径引用的问题或文件路径配置不正确导致的。

解决方法

为了解决这个问题，我们可以采用以下几种方法。

方法一：使用绝对路径

一种解决方法是使用绝对路径来引用JavaScript文件。这样可以确保应用程序能够准确地找到该文件。我们可以在HTML模板中使用url_for函数来生成绝对路径。

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

在上面的例子中，我们使用了url_for函数来生成JavaScript文件的绝对路径。其中，static是Flask应用程序默认的静态文件目录，js是存放JavaScript文件的文件夹名称，script.js是具体的JavaScript文件名。

方法二：修改静态文件目录

默认情况下，Flask应用程序将静态文件存放在名为static的文件夹中。如果您的JavaScript文件存放在其他目录中，您可以尝试将其移动到static文件夹下。

在移动之后，您可以按照上述方法中的绝对路径方式引用该文件。

方法三：检查文件路径配置

如果您已经按照上述方法进行了配置，仍然无法找到JavaScript文件，那么可能是路径配置不正确导致的。您可以检查Flask应用程序的配置文件，特别是app.py文件中是否正确配置了静态文件路径。

确保以下内容在您的app.py文件中正确配置：

from flask import Flask

app = Flask(__name__)
app.static_folder = 'static'  # 此处设置静态文件目录的路径

在上述代码中，我们通过修改app.static_folder的值来设置静态文件目录的路径。请确保该路径与您的JavaScript文件所在的目录一致。

示例说明

下面是一个具体的示例，演示了如何在Flask应用程序中正确引用JavaScript文件。

Step 1: 创建Flask应用程序

首先，我们需要创建一个Flask应用程序。在命令行中输入以下命令来创建一个新的Flask应用程序：

$ mkdir myapp
$ cd myapp
$ touch app.py

在app.py文件中，输入以下内容：

from flask import Flask, render_template

app = Flask(__name__)
app.static_folder = 'static'

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

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

Step 2: 创建模板文件

在根目录下创建一个名为templates的文件夹，并在该文件夹中创建一个名为index.html的文件。

在index.html文件中，输入以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>Flask App</title>
</head>
<body>
    <h1>Flask App</h1>

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