Question

我有一个用Vue.js v2 / webpack构建的Django SPA。

我希望能够使用Django静态模板标签在Vue.js模板.vue文件中添加对图像等的引用。

目前在我的Django base.html模板中：

{% load static %}
{% load render_bundle from webpack_loader %}
<html>
   <head>
      <!-- This works fine here! -->
      <link rel="stylesheet" href="{% static 'css/test.css' %}" />
      ...
   </head>
   <body> 
      <div id="app">
        <!-- Vue.js app gets mounted here -->
      </div>
   </body>
</html>

这当然是我用于SPA（单页面应用程序）的HTML页面。

但是，当我尝试在我的.vue模板文件中使用静态标记时，如下所示：

{% static 'js/test.js' %}

它不起作用 - 它永远不会被插值，因为当然Django是服务器端而Vue是客户端。

我想继续使用staticfiles标签（而不是硬链接）因为我对静态文件，媒体甚至本地/临时/ prod环境使用不同的存储后端。

有关如何使用Django / Vue.js处理此问题的任何想法？这里有一个很好的解决方案，可以将staticfiles链接到模板客户端吗？

Answer 1

一个好的解决方案？职责分离。为什么Django模板应该参与其中？您的前端代码可以处理所有渲染。你的后端可以提供其余的api端点。

获取Django的staticfiles包括在Vue.js .vue模板中工作

1 个答案: