获取 Django 的静态文件包括在 Vue.js .vue 模板中工作答案

【问题标题】：Getting Django's staticfiles includes working inside Vue.js .vue templates获取 Django 的静态文件包括在 Vue.js .vue 模板中工作
【发布时间】：2017-11-03 05:15:21
【问题描述】：

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

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

现在在我的 base.html Django 模板中：

{% 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 是客户端的。

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

关于如何使用 Django/Vue.js 处理此问题的任何想法？这里有什么好的解决方案可以将静态文件链接到模板客户端？

【问题讨论】：

标签： javascript django webpack vue.js vuejs2

【解决方案1】：

一个好的解决方案？职责分离。为什么要涉及 Django 模板？您的前端代码可以处理所有渲染。你的后端可以只提供rest api端点。

【讨论】：

这几乎不是答案。你以前用过 Django 吗？映射到静态 url 非常重要。
我现在正在开发一个应用程序——后端的 Django 和前端的 Vuejs。 Django 部分根本不关心渲染。我没有使用任何涉及 Django 模板、静态文件等的东西。所有渲染都由前端 Vuejs 代码处理。我唯一的观点是你需要质疑使用 Django 模板的决定。
如何链接到图片等静态资产？用户上传的文件？
我不处理用户上传的文件/媒体，但任何其他图像都在src\images 中，并且会被 webpack 拾取。你看过关于后端集成的 Vue 文档吗？ vuejs-templates.github.io/webpack/backend.html
您是否使用 collectstatic 命令实现了该功能？否则在heroku上运行有点困难，例如。