vue.js 与 Django-webpack-loader答案

【问题标题】：vue.js with Django-webpack-loadervue.js 与 Django-webpack-loader
【发布时间】：2016-09-25 13:28:53
【问题描述】：

我想在 Django 中使用 vue.js，但遇到了如何将 vue 集成到 Django 模板中的问题。

我设法用 webpack 打包，用一段 html 设置 vue，我可以在浏览器中打开“文件”，然后显示 vue 组件。所以这工作正常。

但是，当我运行我的 Django 服务器时，我得到的是标签，而不是 Vue 组件：

也许我走错了路，因为我看到其他人使用 Django REST api，然后你可能会以不同的方式使用你的模板。但如果可能的话，我宁愿首先将 vue 集成到我现有的 Django 模板中！？我有可能，应该怎么做？

test_html：

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>



    {% render_bundle 'main' %}

</head>
<body>

<h3>[[ message ]]</h3>
kiekeboe


</body>
</html>

main.js：

import '../css/custom.css';
import Vue from 'vue';

Vue.config.delimiters = ["[[", "]]"];

new Vue({
    el: 'body',
    data: {
        message: "Hello Vue"
    }
});

更多信息：我目前正在使用：https://github.com/owais/django-webpack-loader，其中包括所有 css、sass、其他 js 库等，通过 render-bundle 标签。正如您所看到的，css 样式确实通过了，所以我认为 vue 标签应该以相同的方式工作？！此外，来自 Django 静态文件夹的静态文件也可以“正常方式”使用。将 bundle.js 放入静态文件夹并将其称为：

<script type="text/javascript" src="{% static 'main-890ab68c2f63dd3f9a2a.js' %}"></script>

它确实有效。那么为什么不通过 Django-webpack-loader 呢？

【问题讨论】：

它只是一个静态文件。它与您的 Django 代码有什么关系？你是如何配置静态文件的？你要去哪个网址？你是如何在模板中加载 JS 的？
@DanielRoseman 我在问题的底部添加了信息。希望对您有所帮助。
@DanielRoseman 当我现在使用“普通静态文件夹”时，现在的问题是为什么它不适用于 django-webpack-loader。
django-webpack-loader 不再维护。我一直在努力寻找它的替代品，它开始受到关注，我绝对建议尝试一下：github.com/shonin/django-manifest-loader

标签： javascript django webpack vue.js

【解决方案1】：

我注意到 vue.js 引用需要以某种方式出现在 vue html 标记之后。使用 Django-web-loader 时同样适用，因此 {% render_bundle 'main' %} 需要关闭。这让它工作了：

{% load staticfiles %}
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>

</head>

<body>

<h3>[[ message ]]</h3>
kiekeboe

{% render_bundle 'main' %}

</body>
</html>

【讨论】：