如何整合Flask与Angular 6开发多进程程序GUI并维护目录结构？

嘿，作为刚接触Flask和Angular 6的新手，要把这俩整合起来确实容易懵——毕竟一个是轻量后端微框架，一个是前端SPA框架，目录结构完全不是一个路子。别担心，我给你一套清晰的方案，既能保持各自的目录独立性，又能顺畅配合开发，甚至方便后期维护。

先别着急整合，先把两个项目各自搭好基础结构，这样你能先熟悉各自的目录逻辑：

• Flask后端：

  1. 创建一个后端目录：mkdir flask-backend && cd flask-backend
  2. 建虚拟环境（必须！避免依赖混乱）：python -m venv venv
  3. 激活虚拟环境：Windows用venv\Scripts\activate，Mac/Linux用source venv/bin/activate
  4. 安装Flask：pip install flask
  5. 创建基础的app.py文件，写个测试接口就行。

• Angular 6前端：

  1. 先装对应版本的Angular CLI：npm install -g @angular/cli@6.x（注意是6.x版本，适配Angular 6）
  2. 创建前端项目：ng new angular-frontend
  3. 进入目录启动开发服务测试：cd angular-frontend && ng serve，打开http://localhost:4200能看到默认页面就ok。

把两个项目放到同一个父目录下，最终结构大概是这样：

my-multiprocess-app/
├── backend/          # Flask后端
│   ├── venv/
│   ├── app.py
│   └── requirements.txt
└── frontend/         # Angular 6前端
    ├── src/
    ├── angular.json
    ├── package.json
    └── dist/         # 打包后生成的静态文件目录

这个结构的好处太明显了：

• 后端的依赖、配置、业务逻辑全在backend里，前端的组件、服务、资源全在frontend里，完全不交叉
• 后期维护时，找后端改Flask，找前端改Angular，不会一头雾水

开发阶段：分开跑服务，用代理解决跨域 #

开发时千万别把Angular打包给Flask——Angular的热重载、实时预览香得很，Flask的debug模式也能实时更新后端代码。只需要解决跨域问题：

1. 在Angular项目根目录创建proxy.conf.json文件，内容如下：

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false,
    "changeOrigin": true
  }
}

2. 修改angular.json里的serve配置，加上代理文件路径：
   找到projects -> your-project-name -> architect -> serve -> options，加一行：
   "proxyConfig": "proxy.conf.json"
3. 启动服务：
   • 先启动Flask：进入backend，激活虚拟环境，跑python app.py（默认端口5000）
   • 再启动Angular：进入frontend，跑ng serve（默认端口4200）
     现在Angular里调用/api/xxx的请求，会自动转发到Flask的5000端口，完美解决跨域，而且两边的热重载都能用！

生产阶段：打包Angular，让Flask托管静态文件 #

当你要部署的时候，把Angular打包成静态文件，交给Flask托管：

1. 在Angular项目里执行ng build --prod，会在frontend/dist/angular-frontend生成打包好的静态文件
2. 修改Flask的app.py，让它能托管这些静态文件，同时处理API路由：

from flask import Flask, send_from_directory
import os

# 配置静态文件目录为Angular打包后的dist文件夹
app = Flask(__name__, 
            static_folder='../frontend/dist/angular-frontend',
            static_url_path='')

# 后端API示例路由
@app.route('/api/hello')
def hello():
    return {"message": "Hello from Flask backend!"}

# 处理SPA的路由：所有非API请求都返回Angular的index.html
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    # 如果请求的是静态文件（比如css、js），直接返回
    if path != "" and os.path.exists(app.static_folder + '/' + path):
        return send_from_directory(app.static_folder, path)
    # 否则返回index.html，让Angular处理前端路由
    else:
        return send_from_directory(app.static_folder, 'index.html')

if __name__ == '__main__':
    # 生产环境可以用多进程启动，比如用gunicorn，开发阶段用debug模式就行
    app.run(debug=True)

现在启动Flask，访问http://localhost:5000就能看到Angular的页面，同时API也能正常调用。

• 后端（Flask）：别把所有代码都堆在app.py里！可以拆分出routes/、models/、utils/等文件夹，比如把API路由放到routes/api.py里，用app.register_blueprint()注册。依赖用requirements.txt管理：pip freeze > requirements.txt，方便后期重装。
• 前端（Angular 6）：严格遵循Angular的标准目录结构！src/app下分components/（组件）、services/（服务）、modules/（模块），别乱改默认结构——这样你查资料、找组件都方便，团队协作也不会乱。
• 多进程处理：如果你的后端需要多进程，开发阶段可以用app.run(threaded=True)开启多线程，生产环境推荐用gunicorn（比如gunicorn -w 4 app:app，4个进程），比Flask自带的服务器稳定多了。

这样一套操作下来，你既能保持Flask和Angular各自的目录独立性，又能顺畅配合开发，后期维护也省心！

内容的提问来源于stack exchange，提问作者anjali