为什么我们需要 `django-webpack-looader` 来通过 django 为 Vue SPA 应用程序提供服务？答案

【问题标题】：Why we need `django-webpack-looader` to serve Vue SPA application through django?为什么我们需要 `django-webpack-looader` 来通过 django 为 Vue SPA 应用程序提供服务？
【发布时间】：2020-06-11 08:00:57
【问题描述】：

我想通过 django 为我的 Vue 应用程序（作为 SPA）提供服务，我通过了这个 article。作者使用django-webpack-loader 来实现这一点，但不是在dist/index.html 周围添加一个简单的TemplateView 就可以了：

url(r'^app/', TemplateView.as_view(template_name='index.html'), name='app'),

这也需要更改 settings.by 如下：

'DIRS': [
    BASE_DIR + "/templates/",
    BASE_DIR + "/dist/",
]

我的问题是如果应用程序已经使用vue-cli 构建，django-webpack-loader 在此过程中的作用是什么？

【问题讨论】：

标签： django vue.js webpack single-page-application django-webpack-loader

【解决方案1】：

在尝试不使用django-webpack-loader 的方法后，我得出结论，每次构建后，您必须执行以下操作：

将您的入口点 (index.html) 放在 django 可以找到的地方。
将您的资源（css、js、图像）放在static 文件夹中。
编辑您的index.html，使其能够正确定位和加载脚本和css文件，例如：

<script src=/js/chunk-vendors.618e754e.js></script>
<script src=/js/app.bbfdaab6.js></script>

应该是：

<script src="{% static 'js/app.bbfdaab6.js' %}"></script>
<script src="{% static 'js/chunk-vendors.618e754e.js' %}"></script>

所以django-webpack-loader 应该可以帮助您自动执行此任务。无需通过 django staticfiles 系统。

我还读到django-webpack-loader 可以在开发期间提供热代码重新加载，但我没有尝试过。我也找不到有关django-webpack-loader 工作原理的信息，因此请认为此答案不完整。

【讨论】：