创建react app + Django部署Uncaught SyntaxError：意外的令牌＆lt;

Question

我一直在尝试将应用部署到pythonanywhere，但页面只是空白，因为 main.6f259c1b.js 文件会抛出错误。

  

未捕获的SyntaxError：意外的标记＆lt;

` 我一直在关注这篇文章https://www.fusionbox.com/blog/detail/create-react-app-and-django/624/和https://www.techiediaries.com/create-react-app-django/的指导 这两篇文章都建议创建一个包含以下内容的视图

class FrontendAppView(View):
    """
    Serves the compiled frontend entry point (only works if you have run `yarn
    run build`).
    """

    def get(self, request):
        try:
            with open(os.path.join(settings.REACT_APP_DIR, 'build', 'index.html')) as f:
                return HttpResponse(f.read())
        except FileNotFoundError:
            logging.exception('Production build of app not found')
            return HttpResponse(
                """
                This URL is only used when you have built the production
                version of the app. Visit http://localhost:3000/ instead, or
                run `yarn run build` to test the production version.
                """,
                status=501,
            ) 

和app网站/ urls.py

urlpatterns = [
    url(r'^', FrontendAppView.as_view())
]

这些说明对我不起作用。这是与 pushState路由，react-routing 相关的东西，我不知道。我的应用程序在 localhost：3000 的开发服务器中正常工作，只能在 pythonanywhere 和本地apache服务器上看到mod_wsgi 。 这是我的本地apache配置（来自Django文档）：

WSGIScriptAlias / /home/user/projects/myproject/myproject/wsgi.py
WSGIPythonHome /home/user/.virtualenvs/myproject
WSGIPythonPath home/user/projects/myproject/

<Directory /home/user/projects/myproject/myproject>
<Files wsgi.py>
Require all granted
</Files>
</Directory>

这是root

DocumentRoot "/srv/http"

我的部分设置

REACT_APP_DIR = os.path.join(BASE_DIR, 'frontend')
STATIC_URL = '/static/'

STATIC_ROOT = 'static'

STATICFILES_DIRS = [
    os.path.join(REACT_APP_DIR, 'build', 'static')
]

所有软件均为最新版本。 也许这个评论解决了我的问题，我只是不明白。 https://github.com/facebookincubator/create-react-app/issues/1812#issuecomment-286511320

这是我的localhost截图

我的项目目录结构

├── api_v0
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── __pycache__
│   ├── serializers.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── myproject
│   ├── __init__.py
│   ├── local.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend
│   ├── build
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   ├── README.md
│   └── src
├── manage.py
├── requirements.txt
├── static
│   ├── admin
│   ├── css
│   ├── js
│   ├── media
│   └── rest_framework
└── website
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── management
    ├── middleware.py
    ├── migrations
    ├── models.py
    ├── __pycache__
    ├── tests.py
    ├── urls.py
    └── views.py

Answer 1

查看页面上引用的样式，并确保所有 CSS 文件都使用 <link> 标记而不是 <script> 标记在页面上引用。

reference

还有 nginx adubting ，您可以请求您的站点管理员帮助