前端项目

1： 执行npm build;
2：上传dist文件夹到期望目录（/mypro/h5/vue-web/dist;）
3：配置NGINX代理

   # 静态网页配置
location /webview{
    alias /mypro/h5/vue-web/dist;
    try_files $uri $uri/ @router;
    index index.html;
} 
location @router {
    rewrite ^.*$ /webview/index.html last;
}

服务端项目

1：使用maven打包
2：上传可执行jar
3：编写执行脚本xxx.sh文件
4：NGINX配置

upstream vueweb{
    server 127.0.0.1:10000;          
}
   # 服务API配置
location /vueweb {
    proxy_pass http://vueweb;
    index  index.html index.htm;
}

xxx.sh示例：

#!/bin/sh
# 你的执行jar文件目录
WORK_DIR=/mypro/vue-webapi

cd $WORK_DIR

case "$1" in
  # 开始
  start)
    # jvm执行参数 - 内存分配 - 日志级别 - jar名称 - 环境 - 端口号
    nohup java -Xms512m -Xmx1024m -Dlogback.loglevel=DEBUG -jar api.jar --spring.profiles.active=test --server.port=10000 >/dev/null 2>&1 &
    # 记录pid
    echo $! > $WORK_DIR/server.pid
    ;;
  # 停止
  stop)
    kill `cat $WORK_DIR/server.pid`
    rm -rf $WORK_DIR/server.pid
    ;;
  # 刷新
  restart)
    $0 stop
    sleep 1
    $0 start
    ;;

  *)
    echo "Usage: run.sh {start|stop|restart}"
    ;;

esac

exit 0

效果图

注：Kaptcha验证码