Django - 从静态文件夹提供SPA [英] Django - serving a SPA from static folder

问题描述

我们的django服务器是我们的API以及一个操作后端。我正在通过编写一个缓慢取代现有操作后端的Vue SPA来改进我们的ops后端。

Our django server is our API as well as an operations backend. I'm working on improving our ops backend by writing a Vue SPA that slowly replaces the existing ops backend.

我是前端，有点迷失Django配置。有人可以为此问题提出一个理智的解决方案吗？

I'm frontend and a little lost in intricacies of Django configs. Could someone suggest a sane solution for this problem?

我希望将应用程序从静态文件夹中提供，并设置：

I would like for the app to be served out of static folder, and have set:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, '../console/dist'),
)

这个工作，我可以看到我当我查看源代码时，只能在 http：// localhost：8000 / static / console / index .html

This works and I can see my code when I view source, but only at http://localhost:8000/static/console/index.html

1）这不行，因为作为SPA，Vue需要控制路由。从Django方面我如何可以使用我的Vue应用程序的 / static / console / * 在Vue端，我必须在Webpack和Vue-Router中配置什么？

1) this won't work because as a SPA, Vue needs control of routing. From the Django side how can I have /static/console/* use my Vue app? On the Vue end, what do I have to configure in Webpack and Vue-router?

2）尽管事实上我可以看到我编译的应用程序源，我收到错误：

2) despite the fact that I can see my compiled app source, I get errors:

Creating Application Cache with manifest http://localhost:8000/static/appcache/manifest.appcache
index.html:1 Application Cache Checking event
index.html:1 Application Cache Downloading event
index.html:1 Application Cache Progress event (0 of 7) http://localhost:8000/favicon.ico
index.html:1 Application Cache Error event: Resource fetch failed (4) http://localhost:8000/favicon.ico
index.html:1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

这很奇怪，因为 http：// localhost：8000 / favicon.ico 是一个工作网址。我有一种感觉，这也是一个Webpack问题。

which is weird because http://localhost:8000/favicon.ico is a working URL. I have a feeling this is also a Webpack problem.

我的选择是什么？

推荐答案

我使用Django的Angular2应用程序（它的工作没有问题） - 我认为它可以帮助你。

I made it like this for Angular2 app with Django(it works without problems) - I think it can help you.

urls.py： / p>

urls.py:

# catch-all pattern for compatibility with the Angular routes
url(r'^(?P<path>.*)/$', views.index),
url(r'^$', views.index),

views.py

def index(request, path=''):
"""
Renders the Angular2 SPA
"""
return render(request, 'index.html')

index.html

index.html

{% load staticfiles %}
...some other stuff...
<app-root>Loading... </app-root>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static  'js/materialize.min.js'%}"></script>

<!-- Angular app -->
<script type="text/javascript" src="{% static 'js/app/inline.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'js/app/vendor.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'js/app/main.bundle.js' %}"></script>
<script type="text/javascript" src="{% static 'js/app/scripts.bundle.js' %}"></script>¸

settings.py

settings.py

TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATE_DIR],
        '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',
            ],
        },
    },
]

我的index.html存储在templates目录中，我的js应用程序文件存储在静态/ js / app中。

My index.html is stored in templates directory, my js app files are stored in static/js/app.

这篇关于Django - 从静态文件夹提供SPA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！