flask vue axios 前后端分离,flask项目部署
主要介绍了flask和vue的前后端分离项目部署的示例代码，非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。
前段时间，我开发了一个项目。我后端用的是flask框架写接口，前端用的是vue框架。项目的前端和后端是完全分离的，所以我在部署的时候遇到了一些问题。请记录下来。
部署环境：centos6.5，Python3.6.3，flask0.12.0 vue
部署模式：uwsgi nginx
步骤：
1.先安装python运行环境，这很正常。
2.安装uswsgi并正常运行(使用pip安装，pip安装uwsgi):
创建新的config.ini文件
[uwsgi]
启动时# uwsgi使用的地址和端口，nginx代理时需要转发到这个地址。
socket=x.x.x.x:xxxx
#python环境目录
#home=/usr/local/python/bin
#指向网站的根目录
chdir=/root/www
#python项目启动器文件
wsgi-file=/root/www/run.py
#python程序中用于启动的应用程序变量的名称
可调用=应用程序
#处理器数量
流程=3
#线程数量
线程=3
#状态监控地址
统计=127.0.0.1:5000
#设置uwsgi包解析的内部缓冲区大小。默认4k
缓冲区大小=32768
Uwsgi启动命令：
Uwsgi config.ini #这个命令直接启动。
Uwsgi -d - ini config.ini #该命令在后台运行，通常使用。
3.安装nginx，这很正常。我们通过运维安装，流程不详细。请百度。
问题来了：
当我们同时代理vue和flask时，无论我们做什么，前端都无法访问flask的地址。
解决方案：
用两个不同的域名分别代理vue和flask，Vue指向Flask的代理域名。
用户nginx
worker _ process 1；
error _ log logs/error . log；
# error _ log logs/error . log notice；
# error _ log logs/error . log info；
PID logs/nginx . PID；
事件{
worker _ connections xx
使用epoll
}
http {
包括mime.types
default_type应用程序/八位字节流；
log _ format main $ remote _ addr-$ remote _ user[$ time _ local] $ request
$ status $ body _ bytes _ sent $ http _ referer
“$ http _ user _ agent”“$ http _ x _ forwarded _ for”；
# access _ log logs/access . log main；
server_tokens关闭；
在上发送文件；
# tcp _ nopush on
# keepalive _ time out 0；
keepalive _ timeout xx
# gzip on
服务器{
听xx；
hqfund.comwww.hqfund.com；
返回301 https://$ host $ request _ uri
}
服务器{
监听443 ssl
server _ name xxx.com1
SSL _ certificate/xxxx；
SSL _ certificate _ key/xxxx；
位置/{
root/xxxx；
索引index.html index.htm；
}
}
服务器{
听xx；
server _ name xxx.com2
返回301 https://$ host $ request _ uri
}
服务器{
听xxx ssl
server _ name xxx.com2
SSL _ certificate/xxxx；
SSL _ certificate _ key/xxxx；
位置/{
包括uwsgi _ params
uw SGI _ pass x . x . x . x:xx；
proxy _ http _ version 1.1
proxy _ set _ header Upgrade $ http _ Upgrade；
proxy_set_header连接“升级”；
}
}
}
本文关于flask和vue的前端分离项目部署的样例代码到此为止。有关flask和vue前端分离的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。