Django 使用 Bootstrap，在 DEBUG = True 模式下，部分 js、css 提示 404 错误

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Django Project

› Django REST Framework

这是一个创建于 3151 天前的主题，其中的信息可能已经有所发展或是发生改变。

Django 1.8.3

setings.py static 配置

INSTALLED_APPS = (
    ...
    'django.contrib.staticfiles',
    ...
)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates').replace('\\', '/')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.static',
            ],
        },
    },
]

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

使用的 Bootstrap 模板是 http://todc.github.io/todc-bootstrap/getting-started/

项目目录结构


├── manage.py
├── static
│   ├── bootstrap
│   │   ├── css
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   ├── bootstrap.min.css.map
│   │   │   ├── bootstrap-theme.css
│   │   │   ├── bootstrap-theme.css.map
│   │   │   ├── bootstrap-theme.min.css
│   │   │   ├── bootstrap-theme.min.css.map
│   │   │   ├── todc-bootstrap.css
│   │   │   ├── todc-bootstrap.css.map
│   │   │   ├── todc-bootstrap.min.css
│   │   │   └── todc-bootstrap.min.css.map
│   │   ├── fonts
│   │   │   ├── glyphicons-halflings-regular.eot
│   │   │   ├── glyphicons-halflings-regular.svg
│   │   │   ├── glyphicons-halflings-regular.ttf
│   │   │   ├── glyphicons-halflings-regular.woff
│   │   │   └── glyphicons-halflings-regular.woff2
│   │   ├── img
│   │   │   └── checkmark.png
│   │   └── js
│   │       ├── bootstrap.js
│   │       ├── bootstrap.min.js
│   │       └── npm.js
│   ├── css
│   │   └── dashboard.css
│   └── jquery
│       └── jquery-2.2.3.min.js
└── templates
    └── index.html

index.html 中的引用

  <head>
    ...
    <title>Dashboard Template for TODC Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- TODC Bootstrap core CSS -->
    <link href="{{ STATIC_URL }}bootstrap/css/todc-bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{ STATIC_URL }}css/dashboard.css" rel="stylesheet">
    ...
  </head>

  <body>
    ...
    <script src="{{ STATIC_URL }}jquery/jquery-2.2.3.min.js"></script>
    <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js"></script>
  </body>
    ...

错误提示

[12/Apr/2016 17:11:35]"GET / HTTP/1.1" 200 8953
[12/Apr/2016 17:11:36]"GET /static/bootstrap/css/bootstrap.min.css HTTP/1.1" 304 0
[12/Apr/2016 17:11:36]"GET /static/css/dashboard.css HTTP/1.1" 404 1667
[12/Apr/2016 17:11:36]"GET /static/bootstrap/css/todc-bootstrap.min.css HTTP/1.1" 404 1724
[12/Apr/2016 17:11:36]"GET /static/bootstrap/js/bootstrap.min.js HTTP/1.1" 304 0
[12/Apr/2016 17:11:36]"GET /static/jquery/jquery-2.2.3.min.js HTTP/1.1" 404 1694

这个问题要怎么解决啊？

18 条回复 • 2016-11-09 08:47:13 +08:00

cc7756789

2016-04-12 17:30:14 +08:00

怀疑是目录和文件权限的问题，

lonelinsky

2016-04-12 17:32:06 +08:00

在项目的`urls.py`里面增加：
```python
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns += staticfiles_urlpatterns()
```
试试？

https://docs.djangoproject.com/en/1.9/ref/contrib/staticfiles/#static-file-development-view

shenxgan

2016-04-12 17:33:07 +08:00

可以试试这个：

shenxgan

2016-04-12 17:34:05 +08:00

@shenxgan 点错了
可以试试这个：
注释 `STATIC_ROOT`
添加：
```python
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
```

lonelinsky

2016-04-12 17:39:23 +08:00

@lonelinsky

```python
# test markdown
print('hello, markdown')
```

imkh

2016-04-12 17:43:29 +08:00

@cc7756789 不是

imkh

2016-04-12 17:43:39 +08:00

@lonelinsky 不行哦

imkh

2016-04-12 17:43:55 +08:00

@shenxgan 这样可以了谢谢

imkh

2016-04-12 17:44:15 +08:00

@shenxgan 有没有相关的原理解释文档参考啊？

imkh

2016-04-12 17:56:57 +08:00

原来放在 app （不是 project ）下使用 STATIC_ROOT = os.path.join(BASE_DIR, 'static')，才不会部分 css 、 js 文件出现 404 错误
```
blogapp/
├── admin.py
├── form.py
├── __init__.py
├── migrations
│   ├── 0001_initial.py
│   ├── 0002_auto_20160411_1721.py
│   ├── __init__.py
├── models.py
├── static
│   ├── bootstrap
│   │   ├── css
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   ├── bootstrap.min.css.map
│   │   │   ├── bootstrap-theme.css
│   │   │   ├── bootstrap-theme.css.map
│   │   │   ├── bootstrap-theme.min.css
│   │   │   ├── bootstrap-theme.min.css.map
│   │   │   ├── todc-bootstrap.css
│   │   │   ├── todc-bootstrap.css.map
│   │   │   ├── todc-bootstrap.min.css
│   │   │   └── todc-bootstrap.min.css.map
│   │   ├── fonts
│   │   │   ├── glyphicons-halflings-regular.eot
│   │   │   ├── glyphicons-halflings-regular.svg
│   │   │   ├── glyphicons-halflings-regular.ttf
│   │   │   ├── glyphicons-halflings-regular.woff
│   │   │   └── glyphicons-halflings-regular.woff2
│   │   ├── img
│   │   │   └── checkmark.png
│   │   └── js
│   │   ├── bootstrap.js
│   │   ├── bootstrap.min.js
│   │   └── npm.js
│   ├── css
│   │   └── dashboard.css
│   └── jquery
│   └── jquery-2.2.3.min.js
├── templates
│   └── blogapp
│   └── index.html
├── tests.py
├── views.py

```

放在 project 下的某个自定义项目（比如 project/static)的话，要使用
```
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
```

zhuangzhuang1988

2016-04-12 17:58:59 +08:00

Pycharm debug 一下.. 基本就知道了./

gamexg

2016-04-12 20:08:14 +08:00 via Android

Django 的静态文件不是需要使用命令合并的吗？
各个 app 有自己的 static 文件夹，需要使用命令合并成为一个。

ericFork

2016-04-12 21:18:56 +08:00

@gamexg 这个是 DEBUG = False 时，以便其他 webserver 来 serve 静态文件
在 DEBUG = True 模式下是可以用内建 server 的

imkh

2016-04-12 23:25:56 +08:00

@ericFork 是的

shenxgan

2016-04-13 08:26:22 +08:00

@imkh
1. 执行 collectstatic 一般是在生产环境中使用，将所有的静态文件汇集到你指定的 STATIC_ROOT 目录下。这样做的目的是因为在生产环境（比如我使用 nginx ）中一般只会指定一个静态文件路径。
2. 在开发环境（ debug ）中，查找静态文件的顺序是：先在 STATICFILES_DIRS 里面找，然后在各个 APP 下的 static 目录下找，有同名的文件不要紧，它只会使用找到的第一个。看看官网描述： https://docs.djangoproject.com/en/1.8/ref/settings/#staticfiles-finders

Fred84

2016-04-13 14:10:13 +08:00

@imkh shenxgan 说的是对的，你可以看看我的这个总结文章： http://fredzc.com/blog/8_20160325160441.html 。

crazycookie

2016-11-09 08:46:25 +08:00

collectstatic 到你 static 文件下，如果是 nginx ，还要把 static 这个文件夹别名下，这样就完善了，因为动态和静态分离

crazycookie

2016-11-09 08:47:13 +08:00

python manage.py runserver 开发模式下，框架会自动模拟，但是到了 debug=False, 就不会用框架给你找静态文件了