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

2016-04-12 17:23:53 +08:00
 imkh

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

这个问题要怎么解决啊？

7787 次点击
所在节点    Django
18 条回复
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
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, 就不会用框架给你找静态文件了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/270503

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX