在 Heroku 上使用包裹捆绑器托管 Django 和 React

Posted 2023-03-15

【中文标题】在 Heroku 上使用包裹捆绑器托管 Django 和 React

【英文标题】：Hosting Django And React with parcel bundler on Heroku

【发布时间】：2020-10-22 08:56:20

【问题描述】：

我一直在尝试在前端使用 React 和 Parcel bundler 托管我的 Django rest 应用程序，成功托管后，样式和 js 未加载，控制台中出现 MIME 类型错误：

拒绝应用来自 'https://minglemarket.herokuapp.com/src.aaba6b6a.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查. minglemarket.herokuapp.com/:1 拒绝应用来自“https://minglemarket.herokuapp.com/style.e1ff692e.css”的样式，因为它的 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且启用严格的 MIME 检查。 minglemarket.herokuapp.com/:1 拒绝执行来自 'https://minglemarket.herokuapp.com/src.8d3ada04.js' 的脚本，因为它的 MIME 类型（'text/html'）不可执行，并且严格的 MIME 类型检查已启用。

【参考方案1】：

我在 Heroku 上的 Django/React/Django Restframework/Webpack 站点上遇到了类似的问题。我得到了同样的错误。实际上，我不得不不止一次地修复它，并且我用两种不同的方式修复了它。解决静态文件 MIME 类型问题的一种方法是设置我的前端 urls.py 文件，如下所示：

from django.urls import path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    re_path(r'^robots\.txt$', TemplateView.as_view(
        template_name="frontend/robots.txt", content_type='text/plain')),
    re_path(r'^manifest\.json$', TemplateView.as_view(
        template_name="frontend/manifest.json", content_type='application/json')),
    re_path(r'^.*', TemplateView.as_view(
        template_name='frontend/index.html',
        content_type='text/html')),

我能够解决此问题的另一种方法是确保我在 Webpack 中设置了 publicPath，但我不确定它如何与 Parcel 一起使用。我在 webpack 中设置为 publicPath: '/' ，但主要只是需要设置一些东西。

我使用过 Parcel，但最终它提供的包比 webpack 大得多，所以我切换回 webpack。