【VUE】Flask+vue-element-admin前后端分离项目发布到linux服务器操作指南

一、Flask后端发布环境搭建

1.1 python环境

第一步：安装python环境

可参考前文Centos7 配置LAMP环境-Python3

第二步：配置python虚拟环境

1.安装virtualenv第三方库

pip install virtualenv

2.配置virtualenv软连接
直接用 virtualenv venv 命令 来创建虚拟环境（env为虚拟环境的目录名）会提醒bash: virtualenv:command not found
1）首先找到virtualenv的安装路径

find / -name virtualenv

2）我这边的文件地址是：

/usr/local/bin/python3/bin/virtualenv

3）创建软链接

ln -s /usr/local/bin/python3/bin/virtualenv /usr/bin/virtualenv

接下来就可以直接使用virtualenv命令了。
3.创建虚拟环境
cd到想要存放虚拟环境的路径,例如：

cd /path/to/your/flask_demo # 习惯性将venv存放至项目根目录下

执行：

virtualenv -p python3.9 venv

-p python3.9 指定python版本
venv 虚拟环境名称，自定义
如果看到 类似create virtual environment CPython3.9.7.final.0-64 in 222ms.的文字，表示创建python虚拟环境成功。
4.激活虚拟环境

source venv/bin/activate

5.安装flask项目依赖项
6.离开虚拟环境

deactivate

1.2 uwsgi环境

1.安装uwsgi模块

pip install uwsgi

2.创建uwsgi配置文件
在激活的虚拟环境中/path/to/your/flask_demo/venv 目录下创建 uwsgi.ini 配置文件

# 此时的目录为 /path/to/your/flask_demo/venv 或者自定义路径，建议放在flask项目根路径
touch uwsgiconfig.ini

3.编辑配置文件 添加以下内容

vim uwsgiconfig.ini

[uwsgi]
# uwsgi 启动时所使用的IP地址与端口,0.0.0.0表示所有IP地址都行
socket = 127.0.0.1:5200 #如果想服务器内可引用配置为0.0.0.0:5200
# http = 127.0.0.1:5200 #不依赖nginx可以配置为http
# 指向网站目录,也就是你项目根目录
chdir= /path/to/your/flask_demo
# python 你的程序启动文件,如果是app.py那么这里就写app.py
wsgi-file = app.py
# 你的运行程序省略.py后缀的名字
module = app
# 你的启动程序中的 app = Flask(__name__) 变量名,如果是app 那么这里就写app
callable = app
# 进程数量
processes = 5
# 线程数量
threads = 2
#状态检测地址
stats = 127.0.0.1:9191
# 日志输出目录
daemonize = /xxx/xxx/flask.log
# pid存储文件,启动服务的主进程ID
pidfile = /xxx/xxx/uwsgi.pid
# 启动主进程
master = true
# 请求体大小,这里65536/1024 就是 64M
buffer-size = 65536

4.使用脚本启动

uwsgi --ini /path/to/your/flask_demo/venv/uwsgiconfig.ini

5.停止命令

uwsgi --stop /xxx/xxx/uwsgi.pid

1.3 nginx配置

1.服务器安装nginx
可参考前文Centos7.5 nginx安装
2.编辑配置文件

vim /opt/nginx/nginx.conf

修改两点，其他参数可根据需求更改(我这边没改)：
1.server_name修改为服务器ip；
2.添加location /test/{};

server{
listen 80;
server_name server_ip;  #服务器iplocation /test/{ # 我的后端接口都添加了test标签，所有包含test的URL都会转发到这include uwsgi_params;uwsgi_pass 127.0.0.1:5200;uwsgi_pass HTTP_X-Forwarded-For $proxy_add_x_forwarded_for;uwsgi_pass Host $http_host;uwsgi_pass HTTP_X-Real-IP $remote-addr;
}
}

3.重新启动nginx

1.4 测试

使用postman做接口测试，url格式如下所示：

http://server_ip:80/test/user/login

二、VUE前端发布环境搭建

2.1 配置修改

1. .env.production

ENV = 'production'
#base api
VUE_APP_BASE_API='test'
SYSTEM_BACKEND_URL='http://127.0.0.1:5200'
2.vue.config.js
1)打包路径
publicPath:'/' 改为 process.env.NODE_ENV === 'development' ? '/' : './'
2)反向代理
proxy:{[process.env.VUE_APP_BASE_API]:{target:process.env.SYSTEM_BACKEND_URL,changeOrigin:true;pathRewrite:{['^'+ process.env.VUE_APP_BASE_AP]:process.env.VUE_APP_BASE_AP}}
3)打包模式
src/router/index.js将mash:'history'改为mode:'hash'
const createRoter =()=> new Router({mode:'hash',scrollBehavior:()=>({y:0}),router:constantRoutes
})
}

2.2 打包上传服务器

1.打包

npm run build:prod

执行完成后，会在项目根目录下生成一个dist文件夹
2.上传服务器
将dist文件夹上传服务器/html/dist

2.3 nginx配置

server {listen       80;server_name  server_ip;access_log off;location / {root   /html/dist; index  index.html index.htm;try_files $uri $uri/ /index.html @router;}location @router{rewrite ^.*$ /index.html last;}}

重新启动nginx

2.3 测试

http://server_ip/index.html

三、联合调试