Django+Vue 的项目实际部署的时候，使用 Django 集成 vue 到一个服务上，还是 Django 和 vue 分开？

看到很多教程会这样推荐，就是在 Django 上集成 VUE，也就是在 settings.py 配置 templates 目录到 vue 的 dist 目录，这样可以实现，在 Django 的服务上直接调取 vue 前端，后端 api 还是使用 Django 的。
Django 自己启服务，只提供 API，VUE 自己启动服务，只提供前端

我又在想，既然前后端分离开发，那么如果按照“上 1”的方案来的话，每次前后端开发完之后，还得做单独的集成，这个时候就需要前后端一起来搞了，或者说多了一步骤，为何不直接 Django 跑自己的服务，vue 跑自己的服务，这样前后端开发完，只要接口没问题，直接就可以分别上线了，而不需要集成这一步骤。

各位大佬有什么建议？

django

Vue

集成

API

26 条回复 • 2020-03-04 13:56:41 +08:00

mayx

2020-03-02 16:14:19 +08:00 via Android

我觉得分开好，直接上 nginx，反代 django 就 OK 了

ThirdFlame

2020-03-02 16:16:19 +08:00

同意楼上的观点。

just1

2020-03-02 16:17:24 +08:00 via Android

1 事实上在正式部署的时候是 nginx 读取你的前端静态文件，前端跟 django 没有关系，django 只是帮忙把 dist 的文件 copy 到 static
2vue 提供的服务那个是调试环境呀

GoLand

2020-03-02 16:18:16 +08:00

当然分开。不管是出于开发还是部署，都应该分开放。分开放前后端自己管理自己的代码库，也不存在代码间的相互依赖。

saulshao

2020-03-02 16:21:54 +08:00

显然分开是对的，网上的教程是为了教你怎么入门。
入门教材肯定不能讲你开发的时候准备俩虚拟机，一个起 vue，另外一个起 Django，然后后端读完数据库，切换到前端的虚拟机上去继续编界面......
这估计读者一看就直接关了。

litp

2020-03-02 16:26:29 +08:00

@just1 第一点我还真不知道，我现在的小测试环境是，集成到了 templates 之后，应该是根据 Django 的路由，走到的 vue index，所以应该是在 apache 或者 uwsgi 上，集成到了 templates 里之后，应该不会直接走 nginx 吧。

just1

2020-03-02 16:57:54 +08:00

@litp #6 嗯。。。我发出去才感觉不对但不能改了...
可以 location / 配置 vue
location /api/ 反代 django

tonytonychopper

2020-03-02 17:07:18 +08:00

分开就完事了，楼上说的对，教程只是图个方便。

ben1024

2020-03-02 17:17:08 +08:00

看渲染模式
1.模版渲染模式直接写在一起
2.spa 渲染模式分开
更喜欢模版渲染

chuanqirenwu

2020-03-02 17:23:50 +08:00

最好是分开，不要把 django 的模板引擎和 Vue 的模板混到一起，不然你会发现你会陷入汪洋大海。
Django 和 Vue 结合的你可以看下这个项目： https://github.com/zmrenwu/django-blog-project

大部分页面都是 django 模板引擎渲染，评论应用使用 Vue 渲染，通过 API 与后台交互。Vue 相关部分使用 Webpack 打包，通过 django-webpack-loader 读取打包后的文件。

litp

2020-03-02 17:24:28 +08:00

@ben1024 看来是大佬，我刚搜了下 spa 渲染模式，应该就是指的单页面应用吧。
1. 目前来看如果将 vue 集成到 Django 之后，也是只有一个前端入口，比如 index。所以进去之后，还是走 vue 自己的路由，只不过 index 是走的 Django 路由。所以还是个单页面应用。
2.而且集成到了 Django 之后，应该是算模版渲染，可数据都是 api 来的了，感觉模版渲染的好处也用不到。

所以是不是结论还是得分开啊，这样自己搞自己的，以后 vue 转给前端也方便😂

litp

2020-03-02 17:30:06 +08:00

@chuanqirenwu 感谢，看了你的 GitHub。
请问下，为什么页面渲染不完全用 vue 呢，而是要一部分使用 Django 模版，一部分使用 vue。
完全的分开前后端不是更有利于分工合作么？

chuanqirenwu

2020-03-02 17:41:07 +08:00

@litp 一部分 django 一部分 vue 是出于 SEO 考虑。这个我一个人维护小项目，没有分离的必要，大点项目肯定是 vue + rest api。另外 Django 模版和 Vue 配合起来非常顺畅，想怎么用完全由自己根据需求来决定就可以了。
总之遵循一个原则就行，别学网上的同时用 django 和 vue 渲染一个模板。首先是语法冲突，其次是不好维护。

chuhemiao

2020-03-02 17:43:06 +08:00

vue 放 oss 上省心省事

litp

2020-03-02 17:51:47 +08:00

@chuanqirenwu 谢谢。

moonlitlaputa

2020-03-02 18:02:07 +08:00 via Android

同意 1 楼的观点

ben1024

2020-03-02 18:13:48 +08:00

@litp
1.spa 的集成进入 Django 是不会使用到后端路由，只是走了静态页面到访问路由，这个在 nginx 配置路由时可以设置
2.使用 template 到好处是权限控制，渲染速度，渲染方式，数据级别隐藏，跨域交互，这些优点都是隐性的（更适合展示型界面输出）
有专业的前端，或对项目本身整体性不在意，非开丢给前端也无所谓

find456789

2020-03-03 11:59:36 +08:00

可以在一个机器上，用 docker，一个 nginx 容器，一个 django 容器

nginx：
vue 放在 www 目录下
同时 nginx 反代 django

LeeReamond

2020-03-03 12:20:48 +08:00

@litp
问 LZ 个问题，大部分答案似乎都倾向于分开写。但是我感觉现在的前后端框架开发模式已经高度解耦了，比如一楼所谓的写在一起的方式是通过 webpack 配置 dist 目录来实现“写在一起”，感觉与当初的 php 那种大锅炖的模式已经完全不同了，前后端唯一耦合的地方应该就是前端的 api 指向需要指向后端的地址了吧。。

有一个问题是，你的服务部署生产环境终归还是要通过 nginx 反向代理出去用的，Django 直接暴露显然比较蛋疼一些。如果终归是要反向代理的话，那么比如说按照楼上们回答的方式，是将 node 部署的 vue serve 比如部署在 127.0.0.1:10086，而 Django 提供的 serve 在 127.0.0.1:10087，那么你总不可能用 nginx 将 10087 反代到 10086，一个端口不是只能绑一个程序么，10086 已经被 node 吃掉了。所以 node 部署的服务如果要访问 api 必须得挂 cors。本菜鸡的疑问是我感觉这不是有种脱裤子放屁的感觉么。。。

litp

2020-03-03 13:59:07 +08:00

@LeeReamond
跨域是肯定的，前端不只一个 PC，还会有 APP 和 H5 呢，后端也不一定是一台服务。
我这边也不清楚跨域有啥不妥😂，现在前后端分开的话，跨域很正常吧。

我现在为了后续前端考虑的话，我就直接 django + vue 分开了，分开开发，分开部署，以后前端接手也好搞。

wnanbei

2020-03-03 14:06:54 +08:00

@LeeReamond 实际上用 nginx，那所有的前后端请求都是去请求 nginx，跟你前后端部署在哪个端口已经没关系了

encro

2020-03-03 14:13:33 +08:00

1，nginx 跑 vue 静态，对应根目录；
2，WSGI/ASGI + Supervisord 部署 django rest framework ；
3，nginx 代理 api 目录到 wsgi/ASGI 服务端口；

LeeReamond

2020-03-03 15:01:45 +08:00

@litp

cors 我也不懂。。不过我的感觉是既然本身是作为一个安全机制专门设计出来的，然后你还非得要把它关掉，岂不是有种不识好人心的感觉，总归会有啥问题吧（大概），虽然我目前做的项目都比较菜，开全域允许 cors 也没遇到啥问题，虽说我也没遇到什么非得开 cors 不可的情况。。。。

再者还有一个问题是正常生产环境，假如说你确定我要开 cors 了，安全不安全暂且不提，你总得手调个白名单，这个也增加维护的麻烦度吧

另外前端好上手的问题。。我感觉你照这个配置方法，用 webpack 部署前端和直接部署前端解耦度没有任何区别。。你要是真的分开写是不是叫别人接手的时候他还得配置一大堆 nginx，不是配置起来更麻烦了。。。

LeeReamond

2020-03-03 15:04:24 +08:00

@wnanbei

我跟 LZ 讨论的意思是，你在服务不是直接暴露 node 而是 nginx 反代的情况下，不能实现 nginx 反代 Django 到 node 的同源，node 必须开 cors。我的疑问是我感觉这并不能增大解耦。

litp

2020-03-03 23:15:22 +08:00

@LeeReamond 哦我懂你的意思了，我这样说你可能就懂了些。
1.先看开发的解耦问题
方案 1 是可以前后端分开开发，但是最终要做集成测试，和集成之后的功能测试。
如果是方案 2，单独做各自的功能测试即可。

2.再来看部署的问题
方案 1 是一套代码走一套服务，不管是 uwsgi 也好还是其他中间件，就走一个，就可以跑整个服务
方案 2 是两个服务起步

从我的目前的理解来讲，方案 2 在人员开发、测试分配上更友好。

todd7zhang

2020-03-04 13:56:41 +08:00

@LeeReamond vue 那边线上跑的时候,根本是不用跑 node 的啊, 直接 nginx 访问到 vue 的 index.html 就完事了, 之后 /api 请求,由 nginx 反代到 wsgi 的端口就行了. 这样也不存在跨域的问题
server {
location /api/v1 {proxy http://127.0.0.1:8080/api/v1}
location / {index vue/dist/index.html}
}
忙写,可能有错. 这样怎么会有跨域问题