项目结构:

前后分离部署方案很多，本次采用的是使用NGINX发布静态文件，并代理后端服务解决跨域问题。

前端：vue + element-ui
后端：SpringBoot

---

第一步: 后端部署

• 项目打包

mvn clean package

• 项目开启服务

java -jar digital-markting-customized-business-webapp-scrm-1.0.0.jar

第二步: 前端部署

• vue项目打包

npm run build

• 拷贝dist下生成文件static和index.html到Nginx指定发布的目录（默认html目录下）

第三步: 配置Nginx

server {
        listen       8080;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #代理后端API;
        #后端服务的地址为: http://localhost:8098/api/XXXX, 所以我们代理的地址为 /api

        location /api/ {
                proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                # 后端服务地址
                proxy_pass http://localhost:8098/api/;
        }
        
        #后面配置省略， 默认就好
    }

第四步: 重启Nginx服务

• 重启nginx

nginx -s reload 

齐活。