如何将 VueJS 与 Django 集成并部署它们答案

【问题标题】：How to integrate VueJS with Django and deploy them如何将 VueJS 与 Django 集成并部署它们
【发布时间】：2019-06-22 06:12:43
【问题描述】：

我是前端开发的初学者。

我正在尝试将 VueJS 用于我的新 Django 项目。我正在考虑如何将 Vue 与 Django 集成。我一直在查找，似乎有两种方法可以做到。

第一种方法是将 Vue 文件包含在 static/js 文件夹中。（就像我们使用 jquery 一样）和 templates 也包含在 djnago 项目中。

第二种方法是使用webpack 并在Django 项目之外创建另一个frontend 文件夹。模板包含在 Vue 组件中。

我的第一个问题是第二种方式，我如何部署项目？对于本地开发人员，我需要分别运行 Django 项目和 Vue 部分，我想知道以后如何部署它们。

另外，哪种方式更好？每种方式的优缺点是什么？

【问题讨论】：

【解决方案1】：

如果你的项目只依赖 Django/DRF api，你可以单独部署你的前端。

如果您的项目只需要在某个页面上显示一个 Vue 组件，但要利用 Django 的渲染，则需要将您的 Vue 应用程序包含到 Django 项目中。

仅仅在static/js/Vue 中创建一个文件夹来存储所有相关代码就结构而言就足够了。然后你需要将你的 Webpack 集成到 Django 模板中。为此，您会发现 django-webpack-loader 很有用。还有this tutorial。

【讨论】：

感谢您回答我的问题。我可以在没有 Django-webpack-loader 的情况下创建网站吗？那样的话，我需要分别部署API部分和前端部分吗？
@dude 是的，如果 API 和前端分离，它将单独部署。
谢谢。我还有一个问题。第二种方法仅用于创建单页网站吗？如果我不确定是否要使网站成为单页，是否应该避免使用第二种方式的结构？
@dude 第二种方式 - 使用 django-webpack-loader - 允许在选定的模板中渲染包，并且在一个模板中处理多个 vue 应用程序没有问题。因此，例如，您可以在一个页面上的 2 个不同的 vue 实例中使用带有 2 个组件的捆绑包（假设您的仪表板有 2 个小部件），但不要在公共 /index 上使用任何组件。