Question

我在Vuejs中构建了一个相当简单的Web应用程序，它使用带有webpack的默认npm run dev命令运行。 Vue应用程序正在使用我使用Django构建的django-rest-framework的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。

Answer 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应用程序模板。使用的其他软件包是用于在模板中呈现js包的django-webpack-loader，以及用于在django应用程序中进行热模块替换的webpack-bundle-tracker。

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

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

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

从webpack dev服务器提供应用程序时会抛出错误。捕获该异常将允许它以静默方式失败，您可以开发出dev服务器的所有好处。例如

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))

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

1 个答案: