在 Vercel 中部署的 Django 应用程序上加载 Css 时出现问题

问题描述 投票：0回答：1

我在 

django
中创建了一个应用程序，但是当我在 Vercel 中部署它时，
HTML
工作得很好，但 
CSS
无法加载。我在下面粘贴了我的一些项目，请询问我是否需要任何其他文件来进行必要的更改。

项目结构

C:.
│   .gitignore
│   db.sqlite3
│   manage.py
│   README.md
│   requirements.txt
│   vercel.json
│
├───.mypy_cache
│   │   .gitignore
│   │   CACHEDIR.TAG
│   │
│   └───3.11
│       │   @plugins_snapshot.json
│       │   abc.data.json
│       │   abc.meta.json
│       │   builtins.data.json
│       │   builtins.meta.json
│       │   codecs.data.json
│       │   codecs.meta.json
│       │   contextlib.data.json
│       │   contextlib.meta.json
│       │   dataclasses.data.json
│       │   dataclasses.meta.json
│       │   enum.data.json
│       │   enum.meta.json
│       │   genericpath.data.json
│       │   genericpath.meta.json
│       │   io.data.json
│       │   io.meta.json
│       │   manage.data.json
│       │   manage.meta.json
│       │   ntpath.data.json
│       │   ntpath.meta.json
│       │   pathlib.data.json
│       │   pathlib.meta.json
│       │   posixpath.data.json
│       │   posixpath.meta.json
│       │   re.data.json
│       │   re.meta.json
│       │   sre_compile.data.json
│       │   sre_compile.meta.json
│       │   sre_constants.data.json
│       │   sre_constants.meta.json
│       │   sre_parse.data.json
│       │   sre_parse.meta.json
│       │   subprocess.data.json
│       │   subprocess.meta.json
│       │   sys.data.json
│       │   sys.meta.json
│       │   types.data.json
│       │   types.meta.json
│       │   typing.data.json
│       │   typing.meta.json
│       │   typing_extensions.data.json
│       │   typing_extensions.meta.json
│       │   _ast.data.json
│       │   _ast.meta.json
│       │   _codecs.data.json
│       │   _codecs.meta.json
│       │   _collections_abc.data.json
│       │   _collections_abc.meta.json
│       │   _winapi.data.json
│       │   _winapi.meta.json
│       │
│       ├───collections
│       │       abc.data.json
│       │       abc.meta.json
│       │       __init__.data.json
│       │       __init__.meta.json
│       │
│       ├───email
│       │       charset.data.json
│       │       charset.meta.json
│       │       contentmanager.data.json
│       │       contentmanager.meta.json
│       │       errors.data.json
│       │       errors.meta.json
│       │       header.data.json
│       │       header.meta.json
│       │       message.data.json
│       │       message.meta.json
│       │       policy.data.json
│       │       policy.meta.json
│       │       __init__.data.json
│       │       __init__.meta.json
│       │
│       ├───gerencia
│       │   │   urls.data.json
│       │   │   urls.meta.json
│       │   │   views.data.json
│       │   │   views.meta.json
│       │   │   __init__.data.json
│       │   │   __init__.meta.json
│       │   │
│       │   └───migrations
│       │           0002_remove_produtos_fornecedor_id.data.json
│       │           0002_remove_produtos_fornecedor_id.meta.json
│       │           __init__.data.json
│       │           __init__.meta.json
│       │
│       ├───importlib
│       │   │   abc.data.json
│       │   │   abc.meta.json
│       │   │   machinery.data.json
│       │   │   machinery.meta.json
│       │   │   __init__.data.json
│       │   │   __init__.meta.json
│       │   │
│       │   └───metadata
│       │           _meta.data.json
│       │           _meta.meta.json
│       │           __init__.data.json
│       │           __init__.meta.json
│       │
│       ├───os
│       │       path.data.json
│       │       path.meta.json
│       │       __init__.data.json
│       │       __init__.meta.json
│       │
│       ├───projeto
│       │       asgi.data.json
│       │       asgi.meta.json
│       │       db.data.json
│       │       db.meta.json
│       │       settings.data.json
│       │       settings.meta.json
│       │       urls.data.json
│       │       urls.meta.json
│       │       wsgi.data.json
│       │       wsgi.meta.json
│       │       __init__.data.json
│       │       __init__.meta.json
│       │
│       └───_typeshed
│               __init__.data.json
│               __init__.meta.json
│
├───.vscode
│       launch.json
│
├───base_templates
│   └───global
│           home.html
│
├───gerencia
│   │   admin.py
│   │   apps.py
│   │   models.py
│   │   tests.py
│   │   urls.py
│   │   views.py
│   │   __init__.py
│   │
│   ├───migrations
│   │   │   0001_initial.py
│   │   │   0002_remove_produtos_fornecedor_id.py
│   │   │   __init__.py
│   │   │
│   │   └───__pycache__
│   │           0001_initial.cpython-311.pyc
│   │           0002_remove_produtos_fornecedor_id.cpython-311.pyc
│   │           __init__.cpython-311.pyc
│   │
│   ├───static
│   │   └───gerencia
│   │       ├───css
│   │       │       style.css
│   │       │
│   │       ├───images
│   │       │       desodorante.png
│   │       │       escova-de-dente.png
│   │       │       pente-de-cabelo.png
│   │       │       sabonete.png
│   │       │
│   │       └───js
│   │               main.js
│   │
│   ├───templates
│   │   └───gerencia
│   │       ├───pages
│   │       │       cadastro.html
│   │       │       entradas.html
│   │       │       home.html
│   │       │       produtos.html
│   │       │       relatorios.html
│   │       │       saidas.html
│   │       │
│   │       └───partials
│   │               footer.html
│   │               header.html
│   │               imports.html
│   │
│   └───__pycache__
│           admin.cpython-311.pyc
│           apps.cpython-311.pyc
│           models.cpython-311.pyc
│           urls.cpython-311.pyc
│           views.cpython-311.pyc
│           __init__.cpython-311.pyc
│
├───projeto
│   │   asgi.py
│   │   settings.py
│   │   urls.py
│   │   wsgi.py
│   │   __init__.py
│   │
│   └───__pycache__
│           db.cpython-311.pyc
│           settings.cpython-311.pyc
│           urls.cpython-311.pyc
│           wsgi.cpython-311.pyc
│           __init__.cpython-311.pyc
│
├───static
│   ├───admin
│   │   ├───css
│   │   │   │   autocomplete.css
│   │   │   │   base.css
│   │   │   │   changelists.css
│   │   │   │   dark_mode.css
│   │   │   │   dashboard.css
│   │   │   │   forms.css
│   │   │   │   login.css
│   │   │   │   nav_sidebar.css
│   │   │   │   responsive.css
│   │   │   │   responsive_rtl.css
│   │   │   │   rtl.css
│   │   │   │   widgets.css
│   │   │   │
│   │   │   └───vendor
│   │   │       └───select2
│   │   │               LICENSE-SELECT2.md
│   │   │               select2.css
│   │   │               select2.min.css
│   │   │
│   │   ├───img
│   │   │   │   calendar-icons.svg
│   │   │   │   icon-addlink.svg
│   │   │   │   icon-alert.svg
│   │   │   │   icon-calendar.svg
│   │   │   │   icon-changelink.svg
│   │   │   │   icon-clock.svg
│   │   │   │   icon-deletelink.svg
│   │   │   │   icon-no.svg
│   │   │   │   icon-unknown-alt.svg
│   │   │   │   icon-unknown.svg
│   │   │   │   icon-viewlink.svg
│   │   │   │   icon-yes.svg
│   │   │   │   inline-delete.svg
│   │   │   │   LICENSE
│   │   │   │   README.txt
│   │   │   │   search.svg
│   │   │   │   selector-icons.svg
│   │   │   │   sorting-icons.svg
│   │   │   │   tooltag-add.svg
│   │   │   │   tooltag-arrowright.svg
│   │   │   │
│   │   │   └───gis
│   │   │           move_vertex_off.svg
│   │   │           move_vertex_on.svg
│   │   │
│   │   └───js
│   │       │   actions.js
│   │       │   autocomplete.js
│   │       │   calendar.js
│   │       │   cancel.js
│   │       │   change_form.js
│   │       │   collapse.js
│   │       │   core.js
│   │       │   filters.js
│   │       │   inlines.js
│   │       │   jquery.init.js
│   │       │   nav_sidebar.js
│   │       │   popup_response.js
│   │       │   prepopulate.js
│   │       │   prepopulate_init.js
│   │       │   SelectBox.js
│   │       │   SelectFilter2.js
│   │       │   theme.js
│   │       │   urlify.js
│   │       │
│   │       ├───admin
│   │       │       DateTimeShortcuts.js
│   │       │       RelatedObjectLookups.js
│   │       │
│   │       └───vendor
│   │           ├───jquery
│   │           │       jquery.js
│   │           │       jquery.min.js
│   │           │       LICENSE.txt
│   │           │
│   │           ├───select2
│   │           │   │   LICENSE.md
│   │           │   │   select2.full.js
│   │           │   │   select2.full.min.js
│   │           │   │
│   │           │   └───i18n
│   │           │           af.js
│   │           │           ar.js
│   │           │           az.js
│   │           │           bg.js
│   │           │           bn.js
│   │           │           bs.js
│   │           │           ca.js
│   │           │           cs.js
│   │           │           da.js
│   │           │           de.js
│   │           │           dsb.js
│   │           │           el.js
│   │           │           en.js
│   │           │           es.js
│   │           │           et.js
│   │           │           eu.js
│   │           │           fa.js
│   │           │           fi.js
│   │           │           fr.js
│   │           │           gl.js
│   │           │           he.js
│   │           │           hi.js
│   │           │           hr.js
│   │           │           hsb.js
│   │           │           hu.js
│   │           │           hy.js
│   │           │           id.js
│   │           │           is.js
│   │           │           it.js
│   │           │           ja.js
│   │           │           ka.js
│   │           │           km.js
│   │           │           ko.js
│   │           │           lt.js
│   │           │           lv.js
│   │           │           mk.js
│   │           │           ms.js
│   │           │           nb.js
│   │           │           ne.js
│   │           │           nl.js
│   │           │           pl.js
│   │           │           ps.js
│   │           │           pt-BR.js
│   │           │           pt.js
│   │           │           ro.js
│   │           │           ru.js
│   │           │           sk.js
│   │           │           sl.js
│   │           │           sq.js
│   │           │           sr-Cyrl.js
│   │           │           sr.js
│   │           │           sv.js
│   │           │           th.js
│   │           │           tk.js
│   │           │           tr.js
│   │           │           uk.js
│   │           │           vi.js
│   │           │           zh-CN.js
│   │           │           zh-TW.js
│   │           │
│   │           └───xregexp
│   │                   LICENSE.txt
│   │                   xregexp.js
│   │                   xregexp.min.js
│   │
│   └───gerencia
│       ├───css
│       │       style.css
│       │
│       ├───images
│       │       desodorante.png
│       │       escova-de-dente.png
│       │       pente-de-cabelo.png
│       │       sabonete.png
│       │
│       └───js
│               main.js
│
└───venv

设置.py


from pathlib import Path


BASE_DIR = Path(__file__).resolve().parent.parent

SECRET_KEY = 'django-insecure-083*-&)m0mk5lhhynib=*5qg#)_9is+4g58*74+#2t(4vmlw7k'

DEBUG = True

ALLOWED_HOSTS = ['127.0.0.1', '.vercel.app']

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # My Apps
    'gerencia'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'projeto.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'base_templates',
        ],
        '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',
            ],
        },
    },
]

WSGI_APPLICATION = 'projeto.wsgi.app'

DATABASES = {
    'default': {
        'ENGINE': 
        'NAME': 
        'USER': 
        'PASSWORD': 
        'HOST': 
        'PORT': 

    # I just deleted the code in here
    },


}


AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'static'


MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

urls.py

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),  # teste
    path('', include('gerencia.urls'))  # Main-Home
]

vercel.json

{
  "builds": [
    {
      "src": "projeto/wsgi.py",
      "use": "@vercel/python",
      "config": { "maxLambdaSize": "15mb", "runtime": "python3.11" }
    },
    {
      "src": "build_files.sh",
      "use": "@vercel/static-build",
      "config": {
      "distDir": "staticfiles_build"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "projeto/wsgi.py"
    },
    {
      "src": "/static/(.*)",
      "dest": "/static/$1"    }
  ]
}

我是 

django
的新手，我在 google 上搜索了很多，根据我找到的响应和 django 文档进行了一些更改，但 
css
仍然无法加载。如果你想帮助我，请告诉我我在setting.py或其他文件中做错了什么，以及我必须做什么来纠正它。

django static vercel django-settings
1个回答
0
投票

我也有同样的问题。我把static文件夹放在根目录下

static/myapp/styles.css 然后是 html 中的以下链接：

将 myapp 替换为您的应用程序的名称。

Vercel 可能找不到您的 CSS。如果您输入正确的路径，它将起作用，如果没有，下面的链接有其他替代方案： https://oneException.dev/news/1067945/troubleshooting-css-loading-issues-in-django-on-vercel

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.