1、构建和发布过程和注意事项参考:
构建和发布链接
2、跨域问题:
跨域问题说明链接
详细说明下跨域问题:
nginx反向代理跨域流程图:
说明:开发环境下是直接在一台机子上面进行vue前端直接访问flask后端服务器api接口数据,发布到生产环境中时,vue编译打包成静态文件后跨域访问是无效的,这时候通过nginx反向代理,可实现将vue的api请求通过nginx反向代理访问flask服务器。
(1)首先flask采用cors进行跨域功能设置
(2)打包vue前端:npm run build:prod
(3)配置nginx,配置文件如下所示:
server {
// 用户访问的服务器地址
server_name [填入需要访问的域名];
// ssl证书
listen 443 ssl;
ssl_certificate /home/xiong/data/https/xxxxxx.pem; // ssl证书存放.pem地址
ssl_certificate_key /home/xiong/data/https/xxxxxx.key; // ssl证书存放.key地址
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_session_cache shared:SSL:50m;
// 日志文件保存位置
access_log /home/xiong/data/logs/vue.access.log;
// 反向代理服务器的api接口,这里nginx会拦截地址前面包含/prod-api的请求,
// 并将这些请求转发到地址为 http://localhost:5000/api的flask服务器上
location ^~ /prod-api {
proxy_pass http://localhost:5000/api;
}
// vue前端打包的静态文件访问地址目录
location / {
try_files $uri $uri/ /index.html last;
root /home/xiong/vue-tap/dist;
index index.html;
}
// 错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
配置说明:
server_name www.xxxx.cn;
:用户访问的服务器地址
listen 443 ssl;
:这里采用ssl证书加密形式访问,ssl证书阿里云域名可以申请免费的证书,申请完下载所需的.pem
和.key
文件。