使用 django 开发和部署 Vuejs 应用程序答案

【问题标题】：Developing and deploying Vuejs app with django使用 django 开发和部署 Vuejs 应用程序
【发布时间】：2017-08-09 08:40:44
【问题描述】：

我在Vuejs 中构建了一个相当简单的网络应用程序，它使用默认的npm run dev 命令和webpack 运行。 Vue 应用程序正在使用我使用 django-rest-framework 构建的 Django 的 api。并且每当 Vue 应用程序发生变化时，它会自动热重载，这非常棒。

现在我想使用 django 而不是 webpack 运行 Vue 应用程序。我的意思是 Django 将响应一个 html 模板文件，而 Vuejs 应用程序将在该 html 文件上运行单页应用程序。

我现在做的是先运行这个命令：

npm run build

然后我将 dist/static/ 文件夹文件复制到 django static 文件夹中。最后将其加载到模板中：

index.html

{% load static %}
<!DOCTYPE html>
<html>
<head>
    ...
    ...
    <link href="{% static "css/app.e446b60204fec1f9f5510c711523ffca.css" %}" rel=stylesheet>
</head>
<body>
<div id="app"></div>

<script src="{% static "js/manifest.88376ea5d07804f39ff7.js" %}"></script>
<script src="{% static "js/vendor.e0e5105739e9947a23e7.js" %}"></script>
<script src="{% static "js/app.571e9140518a5bae898c.js" %}"></script>
</body>
</html>

现在，如果我需要更改 Vue 应用程序，我必须重新构建它，复制文件并将其加载到模板中，这看起来很长。

所以，我希望有更好更短的方法来混合 Django 和 Vuejs。

【问题讨论】：

我想我要做的是更改npm run build 将文件直接放入您的django static 文件夹，因为将它们放入dist/static 文件夹然后传输它们确实没有任何好处。我不太确定为什么生成的文件名并不总是相同的，这意味着您根本不必更改模板。我自己对 Vue 比较陌生，但希望这会有所帮助！
除了@ChristopherShroba 之外，django-webpack-builder 可能会对您有所帮助。
@ChristopherShroba 是的，我认为这是一种方法。您如何处理 bulid 文件的命名？
@nik_m 谢谢。我会调查的。

标签： django vue.js vuejs2

【解决方案1】：

这里有一篇很棒的文章解释了如何在 django 模板中运行 Vue 应用程序。

https://ariera.github.io/2017/09/26/django-webpack-vue-js-setting-up-a-new-project-that-s-easy-to-develop-and-deploy-part-1.html

它几乎解释了如何使用 vue-cli 提供的最新 Vue 应用程序模板运行所有内容。使用的其他包是 django-webpack-loader 用于渲染模板中的 js 包，以及 webpack-bundle-tracker 以允许在 django 应用程序中进行热模块替换。

您可以使用设置为从任何位置运行 vue 应用程序的 webpack / django 静态文件，并将静态文件构建到适合您目的的任何位置。

我采取的另外一个步骤是编写一个自定义模板标签来包装 django-webpack-loader 中的 render_bundle 函数。要在使用 webpack 进行生产构建后提供应用程序，您需要包括：

{% render_bundle 'manifest' %}
{% render_bundle 'vendor' %}
{% render_bundle 'app' %}

这将在从 webpack 开发服务器提供应用程序时引发错误。捕获该异常将使其静默失败，您可以利用开发服务器的所有优势进行开发。例如。

from webpack_loader import utils
from webpack_loader.exceptions import WebpackBundleLookupError
from django.utils.safestring import mark_safe

@register.simple_tag
def render_bundle(bundle_name, extension=None, config='DEFAULT', attrs=''):
    try:
        tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs)
    except WebpackBundleLookupError as e:
        return''
    return mark_safe('\n'.join(tags))

【讨论】：