Vue和Django开发环境

Question

为了学习目的，我刚刚开始了一个新的小项目，我想用Django (用DRF)尝试Vue js。我正在尝试使用vue加载程序(webpack-简单模板)。

问题是我不知道如何同步npm run dev和python manage.py runserver。我不知道如何访问django在webpack开发服务器中呈现的模板。

我的意思是，我有一个模板，与django-模板特定的关键字，比如{% load static %}，显然不是由webpack开发服务器处理的。

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

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

还有别的选择吗？

提前感谢您的回答！

Answer 1

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

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

这样，Django可以为您的webpack管道中运行的文件提供服务。

最重要的是，当资产发生变化时，您可以使用webpack活重加载插件和活动重新加载浏览器扩展来自动重新加载。

准备提交更改时，以生产模式构建文件，并在静态dir中提交构建文件。