饿了么团队开源项目 vue-element-admin 前后端分离构建和发布过程

1、构建和发布过程和注意事项参考：
构建和发布链接

2、跨域问题：
跨域问题说明链接

详细说明下跨域问题：

nginx反向代理跨域流程图：

用户 vue nginx 后端服务器 请求数据 api接口访问 反向代理 返回数据 返回数据 返回数据 用户 vue 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文件。