Django启动访问静态资源出现 net::ERR_ABORTED 404，找不到js资源|极客教程

Django启动访问静态资源出现 net::ERR_ABORTED 404，找不到js资源

在使用Django开发网站时，通常会遇到需要加载静态资源（如CSS、JavaScript文件）的情况。然而，有时在启动Django项目并访问网页时，会出现类似net::ERR_ABORTED 404 Not Found的错误，提示找不到对应的静态资源文件。这种情况通常是由于Django项目没有正确配置静态资源导致的。本文将详细解释造成这种错误的原因，并提供解决方案。

问题描述

当在Django项目中引入静态资源文件（如js文件）时，通常会在模板中使用类似以下的语法引入：

<script src="{% static 'js/my_script.js' %}"></script>

然而，在启动Django项目并访问网页时，浏览器开发者工具可能会显示类似以下的错误提示：

GET http://127.0.0.1:8000/static/js/my_script.js net::ERR_ABORTED 404 (Not Found)

这种错误通常是由于Django项目没有正确配置静态资源路径所致。接下来我们将分析可能的原因并解决这个问题。

解决方案

要解决Django启动访问静态资源出现404错误的问题，我们需要检查以下几个方面的配置：

1. 设置STATIC_URL

在Django项目的settings.py文件中，需要设置STATIC_URL变量，指定静态文件的URL前缀。

# settings.py

STATIC_URL = '/static/'

2. 设置STATICFILES_DIRS

除了设置STATIC_URL外，还需要设置STATICFILES_DIRS变量，指定静态文件的存放路径。

# settings.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/'),
]

3. 在模板中加载静态文件

在模板文件中使用{% static %}标签加载静态文件时，要注意路径是否正确。确保路径相对于STATICFILES_DIRS中指定的目录。

<script src="{% static 'js/my_script.js' %}"></script>

4. 运行`collectstatic`命令

在部署Django项目时，需要运行collectstatic命令，将静态文件收集到指定的目录中。

python manage.py collectstatic

5. 检查网页源码

最后，检查浏览器中生成的网页源代码，查看静态文件的链接是否正确。可以通过右键点击浏览器中的网页，选择查看源代码或检查元素来查看网页源码。

通过以上步骤设置和检查，应该能够解决Django启动访问静态资源出现404错误的问题。

示例

下面是一个简单的Django项目示例，展示如何正确配置静态资源。

1. 创建Django项目

首先创建一个新的Django项目。

django-admin startproject myproject
cd myproject

2. 创建一个应用

接着创建一个新的Django应用。

python manage.py startapp myapp

3. 编写视图和模板

在myapp/views.py中编写一个简单的视图函数：

# views.py

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

在myapp/templates/index.html中编写一个模板文件：

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Sample Static File</title>
    <script src="{% static 'js/my_script.js' %}"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

4. 配置静态文件

在settings.py中设置STATIC_URL和STATICFILES_DIRS：

# settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/'),
]

在myproject/static/js/目录下创建一个简单的JavaScript文件my_script.js：

// my_script.js

console.log('Hello from my_script.js!');

5. 运行服务器

运行Django开发服务器，并访问网页。

python manage.py runserver

在浏览器中访问http://127.0.0.1:8000/，检查是否能正确加载静态资源文件。

通过以上步骤，应该能够成功解决Django启动访问静态资源出现404错误的问题，确保静态文件能够正确显示在网页中。

结论

在开发Django项目时，正确配置静态文件路径非常重要。通过设置STATIC_URL和STATICFILES_DIRS，并在模板中正确加载静态文件，可以避免出现404错误。同时，在部署项目时，记得运行collectstatic命令，将静态文件收集到指定的目录中。

Django启动访问静态资源出现 net::ERR_ABORTED 404，找不到js资源