python - Django 静态文件服务与 React Router 冲突

Question

我的网站使用 Django 作为后端，React.js 作为前端。前端使用react-scripts build 进行编译，以便Django 后端可以将其作为静态文件提供服务。当使用“python manage.py runserver”运行网络应用程序时，我遇到以下问题:

该网站仅查找根 URL 'http:localhost:8000/'。但是，如果我想转到子网址'http://localhost:8000/team/ '。 后端无法加载所有静态文件。来自后端的日志如下所示:

[20/Jan/2020 20:23:43] "GET /team/static/media/%E8%82%96%E8%8A%B7%E7%8E%A5.93cb5dfd.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E6%9D%8E%E4%B8%80%E5%87%A1.e74fa446.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E9%83%87%E5%AE%87%E6%AC%A3.af12f28b.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E9%AB%98%E8%AF%97%E5%85%83.ff52ce19.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E8%83%A1%E6%B7%87%E5%AA%9B.88f0c659.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E7%8E%8B%E9%80%B8%E5%87%A1.4fe694ba.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E8%B4%BA%E9%80%B8%E6%83%9F.e77dedac.jpg HTTP/1.1" 200 3137

Django 会自动将 '/team/' 追加到 '/static/' 前面，因此无法找到和渲染最初位于 '/static/' 中的所有文件。这非常棘手，我在网上找不到任何解决方案。

这是我的 urls.py:

from django.contrib import admin
from django.urls import path, include, re_path
from django.conf import settings
from django.conf.urls.static import static
from django.views.static import serve

from .views import index

urlpatterns = [
    path('', index, name='index'),
    re_path(r'^.*$', index),
] 

哪里

index = never_cache(TemplateView.as_view(template_name='index.html'))

我的 settings.py 如下所示:

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

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'build', 'media')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'STATIC_ROOT = os.path.join(BASE_DIR, 'build', 'static')

有谁知道是否有办法摆脱 Django 自动附加的“/team/”前缀？

Answer 1

这也让我很头疼。我通过将网站的域名添加到 package.json 中的 homepage 来解决这个问题

{
  "name": "frontend",
  "homepage": "https://example.com/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/styled": "^11.1.5",
    "@sindresorhus/slugify": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
...

我认为这并不是很理想，特别是如果您有多个域，但这是使其发挥作用的最简单方法。 . 或 ./. 对我不起作用。

差异非常微妙。使用 homepage: "." 运行 build 后，我的 asset-manifest 看起来像这样:

{
  "files": {
    "main.css": "/static/css/main.f45be922.chunk.css",
    "main.js": "/static/js/main.a84f15c1.chunk.js",
    "main.js.map": "/static/js/main.a84f15c1.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.f8f17c43.js",
...

使用"homepage": "https://example.com"运行后，它看起来像这样:

{
  "files": {
    "main.css": "./static/css/main.f45be922.chunk.css",
    "main.js": "./static/js/main.a84f15c1.chunk.js",
    "main.js.map": "./static/js/main.a84f15c1.chunk.js.map",
    "runtime-main.js": "./static/js/runtime-main.f8f17c43.js",
...

每个文件开头的 . 产生了差异，我的程序最终能够找到静态数据。

如果有人知道解决此问题的更简洁方法，请分享!