获取 Django 的静态文件包括在 Vue.js .vue 模板中工作
Posted
技术标签:
【中文标题】获取 Django 的静态文件包括在 Vue.js .vue 模板中工作【英文标题】：Getting Django's staticfiles includes working inside Vue.js .vue templates 【发布时间】：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 处理此问题的任何想法？这里有什么好的解决方案可以将静态文件链接到模板客户端？
【问题讨论】：
【参考方案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上运行有点困难，例如。以上是关于获取 Django 的静态文件包括在 Vue.js .vue 模板中工作的主要内容，如果未能解决你的问题，请参考以下文章
Django在开发中直接从静态文件夹加载静态（不是来自应用程序）