本篇文章首席CTO笔记来给大家介绍有关django怎么代理两个vue项目以及django和vue前后端分离的项目怎么部署的相关内容，希望对大家有所帮助，一起来看看吧。
本文目录一览：
1、VUE 与django整合2、django+vue前后端分离项目部署3、nginx 部署 多个vue项目 端口代理配置问题4、vue 前端设置跨域多代理5、一台服务器，多个域名，怎么同时启动多个vue项目？6、django和vue初次接触VUE 与django整合
创建Django2项目
通过
`django-admin startproject mysite`
命令创建
创建后端服务app
cd mysite目录后,django-admin startapp backend
创建vue项目
vue create frontend
当前版本：django：2.1.7；python：3.6.3；vue-cli：3.5.1；
django+vue前后端分离项目部署
后端用的drf，使用的是uwsgi+nginx
进入服务器项目文件目录下，我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件，配置如下：
测试效果命令：
如果访问：xxx.xxx.xxx.xx:8000 成功， 则uwsgi.ini配置成功
我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下：
1、第一行
主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。
2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。
3、vue部署需要注意的是反向代理地址：
以及后面的端口问题
4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同，否则监听不到
5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了，需要改，但是api可以正常访问，这个有空再说
7、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、图片资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，图片信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要
9、此文仅适合入门
关于django后台admin（suit）缺失的修改（参考：django中文网： ）
在环境中进入项目目录，需要收集css样式，在终端输入命令：
接下来你就回发现static文件中包含了css文件，此时再打开网站，样式显示正常
uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件，里面只有一行内容是 uWSGI 的主进程的进程号。
关于uwsgi,进入同届目录下
教训
获取不到环境，那就指定环境
另外：记得重启uwsgi，重启Nginx，实在不行就先把监听的端口kill掉再重启
暴力删端口：fuser -k 80/tcp
netstat -aptn命令行，查看所有开启的端口号
netstat -ntlp | grep 80 查看具体的端口是否使用
ps -ef | grep uwsgi 查看是否有uwsgi端口存在
nginx 部署 多个vue项目 端口代理配置问题
一 . 更改vue 前端项目 打包根路径
改为
由以上三中类型 运行打包命令后 把dist包 分别对应根路径的名称 重新命名
二. 把第一步拿到的三个项目压缩包 上传到远程服务 nginx 下的html文件夹下 如下：
更改 nginx.conf 配置如下
改成不同的名字“应该也行”打包后直接就是这个文件名 而不是dist
自己可以试一试没事）
(访问时最好在路径后 加个 '/')
更改配置后 重启项目即可
若在 项目运行中与后段接口 交互中出现问题可参考
vue 前端设置跨域多代理
在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置多个proxy跨域代理，本文以vue-element-admin为例展示步骤如下：
1: 配置环境变量 .env.development
2: 配置项目根目录下的vue.config.js 找到devServer
PS：注意VUE_APP_BASE_API 放在数组的最后一个，如果你VUE_APP_BASE_API跟我一样设置为'' 的话，这样才不会被代理的虚拟path覆盖！
3: 找到项目中管理请求地址的文件 src/api/proxy.js （proxy.js 是我随便起的名字?）
打开proxy.js
proxy_api 就是你之前在步骤1：中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) = (proxy_api + path) 一个路径处理函数，参数是'/xx/xxx/fetch/list'，return (proxy_api + path)
需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空：
所以不需要在src/utils/request.js 中对代理的请求进行拦截
如果你为VUE_APP_BASE_API设置了虚拟path路径，那么就需要在src/utils/request.js为这个虚拟路径配置拦截，比较麻烦比不建议这么做。
至此跨域多代理已经设置完了，本文中设置两个代理一个基础代理VUE_APP_BASE_API，一个额外代理VUE_APP_BASE_API_PROXY，默认情况下走基础代理，当请求匹配到匹'/proxy-api' 时走额外代理～
一台服务器，多个域名，怎么同时启动多个vue项目？
可以将多个域名解析到这台服务器ip
然后在服务器端配置项目就可以了
django和vue初次接触
因为要改一些以前的需求,主管让我学习一下vue,花了半天的时间算是入了门,就要拿成熟的项目去改,这个难度还是挺大的.
熟悉网站建设的人应该都知道vue是一个出色的前端框架,而django是python语言体系下的一个后端框架,虽然说他们两个都可以写出完整的网站,但是各有侧重点,django发开速度快,但是本身自带的模板引擎比较孱弱,而vue是以数据驱动和组件化的思想构建,在渲染页面方面实属一流,所以作为python开发者,有时候就会将这个两个框架结合起来,进行网站的开发.
不同的框架是如何结合在一起呢,这就引出了一个前后端分离的思想,后端只提供接口,api,,前端去调用这些接口,来拿数据,再渲染到html模板上
不同框架进行开发时,最大的问题就是跨域,由于框架不同,他们所启用的端口号是不同的,也就是不同的数据源,由于安全性,所以他们之间是不能直接访问的,解除方法是在django的配置文件中引入跨域许可的中间件,用Django的第三方包django-cors-headers来解决跨域问题
这样的话,我们就可以更方便的通过vue的启动方式来进行调试了
最后怎么整合到一起呢?我们知道django是通过指定模板和静态文件的路径来进行渲染的,所以,我们需要将vue文件打包,生成index主页面和静态文件,这样我们就可以把这两个分别放入django默认的文件夹下,或者重新指定路径就可以了.
结语：以上就是首席CTO笔记为大家整理的关于django怎么代理两个vue项目的全部内容了，感谢您花时间阅读本站内容，希望对您有所帮助，更多关于django和vue前后端分离的项目怎么部署、django怎么代理两个vue项目的相关内容别忘了在本站进行查找喔。