Django - 从静态文件夹提供 SPA
Posted
技术标签:
【中文标题】Django - 从静态文件夹提供 SPA【英文标题】:Django - serving a SPA from static folder 【发布时间】:2017-08-25 03:19:47 【问题描述】:我们的 django 服务器是我们的 API 以及操作后端。我正在通过编写一个慢慢替换现有操作后端的 Vue SPA 来改进我们的操作后端。
我是前端,有点迷失在复杂的 Django 配置中。有人可以为这个问题提出一个明智的解决方案吗?
我希望从静态文件夹中提供应用程序,并已设置:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, '../console/dist'),
)
这可行,我可以在查看源代码时看到我的代码,但只能在http://localhost:8000/static/console/index.html
1) 这不起作用,因为作为 SPA,Vue 需要控制路由。在 Django 方面,我怎样才能让/static/console/*
使用我的 Vue 应用程序?在 Vue 端,我在 Webpack 和 Vue-router 中需要配置什么?
2) 尽管我可以看到我编译的应用程序源,但我得到了错误:
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
是一个有效的 URL。我感觉这也是 Webpack 的问题。
我有什么选择?
【问题讨论】:
【参考方案1】:我用 Django 为 Angular2 应用程序做了这样的事情(它可以正常工作) - 我认为它可以帮助你。
urls.py:
# catch-all pattern for compatibility with the Angular routes
url(r'^$', views.index),
url(r'^(?P<path>.*)/$', views.index),
views.py
def index(request, path=''):
"""
Renders the Angular2 SPA
"""
return render(request, '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
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 app文件存放在static/js/app。
【讨论】:
您的开发工作流程是什么样的?每次做出更改时都不需要 ng build 吗? 是的,你必须这样做。我已经放弃了这种方法。现在我正在开发单独的项目,这些项目部署在 nginx 代理后面的单独 docker 容器中。 感谢您的回复。您是否尝试使用 ng build --watch 使其在更改时重建? 不,我正在使用 ng serve 进行开发,然后在完成后构建它。但我不会推荐这种方法。你应该开发两个独立的应用程序,如果你不想陷入疯狂的愤怒情绪,你应该使用 JWT 进行身份验证:)以上是关于Django - 从静态文件夹提供 SPA的主要内容,如果未能解决你的问题,请参考以下文章
如何从 Heroku 上的 Django 项目正确地提供我的 Angular 应用程序静态文件?