时间戳

首页 > 解决方案 > Django + React Project 无法加载静态文件

javascript - Django + React Project 无法加载静态文件

问题描述

我在一个项目文件夹中同时拥有一个 Django 和 React 应用程序。

项目结构：

project/
  frontend/ 
    src/
      components/
        App.jsx
      index.js
    static/
       frondend/
         main.js
    templates/
       frondend/
         index.html
    migrations/
     __init__.py
     admin.py
     apps.py
     models.py
     test.py
     urls.py
     views.py
  project/  
    migrations/
    __init__.py
    admin.py
    apps.py
    models.py
    test.py
    urls.py
    views.py

  nodemodules/
 .bablerc
  manage.py
 .webpack.config.js
 package-lock.json
 package.json

索引.html：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <title>Django DRF - React : Quickstart - </title>
</head>

<body>
    <section>
        <div>
            <div id="root">
                <!-- React -->
            </div>
        </div>
    </section>
</body>
{% load static %}
<script src="{% static 'frontend/main.js' %}"></script>

</html>

我的 .bablerc 文件：{

"presets": [
"es2015", "stage-1", "react"

]，“插件”：[“transform-runtime”，“transform-decorators-legacy”，“transform-class-properties”，“transform-object-rest-spread”，“react-hot-loader/babel”，“ typecheck”，“transform-es2015-modules-commonjs”，“add-module-exports”，“import-asserts”] }

我的 webpack.config.js：

    const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: { presets: ["@babel/preset-env", "@babel/preset-react"] }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./frontend/templates/frontend/index.html",
      filename: "./index.html"
    })
  ]
};

这里的问题是我的静态文件不会被加载

{% load static %}

陈述。

开发：从 project.settings.common 导入 *

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = ['127.0.0.1', 'localhost']

DATABASE_ROUTERS = ['stockdata.routers.StockdataRouter',]
DATABASES = {
'default': {
    'ENGINE': 'django.db.backends.postgresql_psycopg2',
    'NAME': 'dbname',
    'USER': 'postgres',
    'PASSWORD': '*****',
    'HOST': 'localhost',
    'PORT': '5432',
    'OPTIONS': {
        'connect_timeout': 0,
    }
},
'data_db': {
    'ENGINE': 'django.db.backends.postgresql_psycopg2',
    'NAME': 'sdata',
    'USER': 'postgres',
    'PASSWORD': '*****',
    'HOST': 'localhost',
    'PORT': '5432',
   },
 }

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

生产设置：

from project.settings.common import *
DEBUG = False
TEMPLATE_DEBUG = True

ALLOWED_HOSTS = ['aws.ip',]

DATABASE_ROUTERS = ['stockdata.routers.StockdataRouter',]
DATABASES = {
   'default': {
    'ENGINE': 'django.db.backends.postgresql_psycopg2',
    'NAME': 'dbname',
    'USER': 'awsuser',
    'PASSWORD': '******',
    'HOST': '*****.******.ap-south-1.rds.amazonaws.com',
    'PORT': '5432',
    # 'HAS_HSTORE': True,
    'OPTIONS': {
        'connect_timeout': 0,
    },
    'CONN_MAX_AGE': 0
},
'data_db': {
    'ENGINE': 'django.db.backends.postgresql_psycopg2',
    'NAME': 'data_db',
    'USER': 'awsuser',
    'PASSWORD': '*******',
    'HOST': '*****.******.ap-south-1.rds.amazonaws.com',
    'PORT': '5432',
    'CONN_MAX_AGE': 0
}
}
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
STATICFILES_FINDERS = [
     'django.contrib.staticfiles.finders.FileSystemFinder',
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

有什么方法可以让我在 React HTML 中加载我的静态文件。

而且，如果这种配置方式似乎是错误的方法，那么请帮助我逐步正确实施 Django + React 项目。

提前致谢。

经过搜索，我发现问题与“Base_Url”有关，因为如果点击“127.0.0.1:8000/static/frontend/main.js”，这将成功打开我的js文件。所以有人可以帮我解决这个问题。

标签： javascripthtmldjangoreactjsdjango-rest-framework

解决方案

推荐阅读