Vue 和 Django 开发环境

Question

出于学习目的，我刚刚开始了一个新的小项目，我想尝试使用 Django（使用 DRF）的 Vue js。我正在尝试使用 vue 加载器（webpack-简单模板）。

问题是我不知道如何同步npm run dev和python manage.py runserver。我不知道如何访问由 django 在 webpack-dev-server 中呈现的模板。

我的意思是我有一个带有 django-template 特定关键字的模板，比如 {% load static %}，显然 webpack-dev-server 没有处理它。

我知道我每次都可以构建它 npm run build，但是每次我想做一点改变时都等待它有点烦人和无聊。

在 webpack 中，它在默认 index.html 文件中被指定为运行，我怎样才能让它在 127.0.0.1:8000 上实际呈现的模板上工作 python manage.py runserver 运行宁？我知道运行 2 开发服务器没有任何意义，但我不知道如何用其他方式解释。

有其他选择吗？

提前感谢您的回答！

Answer 1

运行你的 Django 服务器正常。 webpack 不应提供您的文件。它应该只构建它们（使用 webpack 开发设置和 webpack --watch）并让 webpack 将它们放在 Django 项目的静态目录中，例如

// in your webpack config
output: {
    path: path.resolve(__dirname, 'project/static/js')
}

这样 Django 可以通过您的 webpack 管道提供运行的文件。

最重要的是，您可以使用 the webpack live reload plugin 和实时重新加载浏览器扩展程序在资产更改时自动重新加载。

当您准备好提交更改时，在生产模式下构建文件并在静态目录中提交构建文件。

Vue and Django Development Environment