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

V2EX = way to explore

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

现在注册

已注册用户请登录

Django Project

Django REST Framework

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

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, 就不会用框架给你找静态文件了