Django-React应用程序找不到manifest.json文件

Question

我正在开发 Django + React 支持的系统。我已经遇到这个清单未找到错误有一段时间了。前端页面什么也没显示。帮我找到根本原因。

我分享的图片如下： 1.) 错误图片： 2.）管理员完美工作的形象：

任何帮助将不胜感激。这是我的 github 的链接，其中的文件位于：https://github.com/FelixOmollo/FourthYearProject

这是我的导航栏代码：

import AuthContext from '../context/AuthContext'
import {useContext} from 'react'
import jwt_decode from "jwt-decode";




import { Link } from 'react-router-dom'

function Navbar() {

  const {user, logoutUser} = useContext(AuthContext)
  const token = localStorage.getItem("authTokens")

  if (token){
    const decoded = jwt_decode(token) 
    var user_id = decoded.user_id
  }

  return (
    <div>
      <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
          <Navbar.Brand href='/'>SPORRMS</Navbar.Brand>
          </a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="/s">Home</a>
              </li>
              <li class="nav-item">
                  <Link class="nav-link" to="/about">About</Link>
              </li>
              {token === null && 
              <>
                <li class="nav-item">
                  <Link class="nav-link" to="/login">Login</Link>
                </li>
                <li class="nav-item">
                  <Link class="nav-link" to="/register">Register</Link>
                </li>
              </>
              }

            {token !== null && 
              <>
                <li class="nav-item">
                  <a class="nav-link" href="/dashboard">Dashboard</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" onClick={logoutUser} style={{cursor:"pointer"}}>Logout</a>
                </li>
              </>
              }   
              
            </ul>
          </div>
        </div>
      </nav>
    </div>
  )
}

export default Navbar

提前致谢。

我期待前端加载正常。在添加身份验证以验证登录和注册之后，我就在 bur 之前。它停止工作了。当我删除后者的身份验证和验证时。它加载得非常好。

Answer 1

问题：-

你的

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'frontend/build'),
        ],
        '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',
            ],
        },
    },
]


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

来自

index.html

      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

是的，你有

href="%PUBLIC_URL%/manifest.json

，但是django如何到达这个公共网址？

Django 不会在

frontend/build/static'

之外的其他地方提供静态服务。

答案：-

1. 使用 django 静态文件夹（

   frontend/build/static'

   ）并将清单移至其中，并使用 django 静态模板标签为其提供服务。（简单）

或者

2. 在清单文件的 urls.py 中写入特定的 url。 （难）