Не удалось загрузить скрипт модуля: необходима помощь
index-d5Zm7UFq.js:1 Не удалось загрузить сценарий модуля: ожидался сценарий модуля JavaScript, но сервер ответил MIME-типом «text/html». Строгая проверка типов MIME применяется для скриптов модулей согласно спецификации HTML.
Я использую React+vite в качестве внешнего интерфейса, а Django и MySQL — в качестве внутреннего. Он работает без проблем в localhsot:5173, но когда я запускаю на localhost:8000, он показывает эту ошибку. После создания dist я скопировал папку dist и вставил ее на серверную часть. Я также настроил settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'dist')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_ROOT = os.path.join(BASE_DIR, 'mediafiles')
MEDIA_URL = '/media/'
Я также настроил urls.py:
from django.urls import path, include, re_path
from django.views.generic import TemplateView
urlpatterns = [
path('auth/', include('djoser.urls.jwt')),
re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
path('vite.svg', TemplateView.as_view(template_name='vite.svg')),
]
Когда я обращаюсь к локальному хосту: 8000, он отображается пустым, и в консоли появляется ошибка: Не удалось загрузить сценарий модуля: ожидался сценарий модуля JavaScript, но сервер ответил MIME-типом «text/html». Строгая проверка типов MIME применяется для скриптов модулей согласно спецификации HTML.
Это мой index.html, который находится внутри dist:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<link rel = "icon" type = "image/svg+xml" href = "/vite.svg" />
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type = "module" crossorigin src = "/assets/index-d5Zm7UFq.js"></script>
</head>
<body>
<div id = "root"></div>
</body>
</html>
Я обновил свой index.html, пожалуйста, помогите!
Ответы 1
Вы используете неправильный URL
<script type = "module" crossorigin src = "/assets/index-d5Zm7UFq.js"></script>
В django вам следует использовать статический тег
в верхней части вашего html-шаблона загрузите статический
{% load static %}используйте тег
{% static 'url' %}с атрибутамиsrc,href:<script type = "module" crossorigin src = "{% static 'assets/index-d5Zm7UFq.js' %}"></script>
Ваш HTML-шаблон должен выглядеть следующим образом:
{% load static %}
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<link rel = "icon" type = "image/svg+xml" href = "/vite.svg" />
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script type = "module" crossorigin src = "{% static 'assets/index-d5Zm7UFq.js' %}"></script>
</head>
<body>
<div id = "root"></div>
</body>
</html>
Если это решило вашу проблему, примите ответ и проголосуйте за него, чтобы он мог помочь и другим.
Я сделаю это, но я новичок, и для голосования требуется 15 репутации, конечно, сойдет после того, как репутация превысит 15.
как вы импортируете/связываете файл JavaScript с файлом index.html? Покажи нам свой тег
script