Vue+Flask--前后端分离项目部署到Tomcat并启动

最近用Vue+Flask写了一个Web应用，展示项目最新版本对应的所有回归用例的测试进度，实时同步测试的回归测试进度。记录下过程和步骤，给小伙伴们参考。

• 一、运用技术

  • Vue+Element UI搭建前端页面
    • 遇到的问题及解决办法
      • 覆盖内联样式
  • Flask实现后端API
    • 遇到的问题及解决办法
      • 跨域

• 二、配置

  • Vue项目配置
    • vue.config.js
      • 如果项目中没有这个文件，在根目录下手动创建一个
    • index.js
      • 加入一句:base:'/'
  • Flask配置

• 三、打包

  • Vue前端打包
    • npm run build
    • 命令执行完成后，项目根目录下会出现dist文件夹
  • Flask
    • pip3 install pyinstaller
    • pyinstaller -F app.py
    • Mac电脑如果提示找不到pyinstaler命令，可以在.bash_profile加入alias pyinstaller=/user/xxx/pyinstaller这一行（pyinstaller的位置）。再source .bash_profile，使配置文件生效
    • 命令执行完成后，项目根目录下会生成build和dist文件夹

• 四、Tomcat部署

  • Tomcat服务器端口配置
    • 配置为9090
  • 部署
    • Vue项目：在Tomcat的webapps目录下新建web文件夹，然后把Vue项目dist文件夹下的内容都复制并粘贴到web目录下
    • Flask项目：这里我直接把flask项目全部复制粘贴到webapps目录下

• 五、启动

  • 启动Tomcat
    • bash startup.sh（startup.sh 在bin目录下）
  • 启动后端Flask
    • 双击webapps下后端项目dist目录下的可执行文件app，即可启动后端项目，并可在终端实现查看请求
    • 浏览器访问127.0.0.1:9090/web即可访问项目，展示项目页面。