如何通过 Django 为 webpack'ed (Vue) 应用程序提供服务，而无需为每次更改重新编译？答案

【问题标题】：How can I serve a webpack'ed (Vue) app through Django without recompiling for every change?如何通过 Django 为 webpack'ed (Vue) 应用程序提供服务，而无需为每次更改重新编译？
【发布时间】：2017-09-28 22:32:17
【问题描述】：

我建立了一个 Django 项目，并想开发一个 Vue 前端来配合它。为了设置 Vue 应用程序，我使用了vue init webpack myproject-frontend。分别使用python manage.py runserver 和npm run dev 分别进行开发非常简单。

将应用程序放在我的 Django 项目的一页中也很容易；如果我首先使用 npm run build 构建 Vue 应用程序。显然，这样做的缺点是速度慢，而且我必须处理包含哈希的文件名（当然，这可以自动化）。

关于npm run dev，我对只能在浏览器中看到 Vue 应用程序不太满意。我仍然可以与我的 API 进行通信（处理 CORS），但这不是网站最终的样子。我计划在同一个页面上有多个 Vue 组件，在不同的页面上同时有不同的组件，而 dev 没有反映这一点。

如何在不省略应用程序的 Django 部分的同时保持不遗漏的保真度？

我试图查看dev 提供的服务，但我对 Webpack 和使用的工具太陌生，无法从中推断出一种方法。 FWIW，这就是我看到的：

看着http://localhost:8080/，我看到了这个：

<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script>

/app.js 本身似乎是 webpack 的一些引导、库和应用程序代码的结果。但是该文件在我的文件系统上不存在，所以我无法从 Django 提供它...

【问题讨论】：

我花了很长时间才找到事后看来显而易见的解决方案，所以我将这个发布给世界其他地方。如果有无 CORS 的解决方案，我仍然感兴趣！

标签： django vue.js

【解决方案1】：

我不知道是否可以通过 Django 服务器以某种方式提供应用程序的 dev 版本（即在默认情况下使用端口 8000 而不是 8080）。

但是，这并不意味着它不能集成到 Django 网站中。 localhost:8080/的源代码中可以看到所有必要的内容：

<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script>

这部分 HTML 可以由 Django 提供，实现与将 dist 文件放在 Django 的静态目录中几乎相同的功能 - 不同之处在于端口和 CORS：

<div id="app"></div>
<script type="text/javascript" src="http://localhost:8080/app.js"></script>

【讨论】：