如何在python flask static内部使用有角构建资源？

Question

我正在研究在前端使用angular7并在后端使用python flask框架的应用程序。 我正在尝试采用角度构建，即dist文件夹，并根据烧瓶结构在烧瓶中进行配置。

我无法在该服务器上加载图像。 dist中的图像路径类似于dist/assets/images 。

flask
---app.py
---templates
   ----index.html
---static
   ---- main6gaugsx.js
   ---- runtime7gyg.js
--conf files

我试图将这些图像移动到flask的静态文件夹中。 但是我无法在main6gaugsx.js设置图像的路径，因为它是捆绑的代码。 此外，图像可能会在以后增加时间点。 每次部署时，我都无法更改。

Answer 1

1. 不要手动移动文件，这只会使部署过程复杂化，并且将来会成为很多问题的地方。
2. 尝试将AngularJS输出构建目录设置为Flask应用程序的静态文件夹。 通常它在webpack配置中。 这将确保您不会手动管理前端构建文件，也将确保保留JS和CSS文件中的相对路径。

但是问题是index.html也将放置在static文件夹中，而不是模板文件夹中。 为了解决这个问题，在Flask app创建过程中将template_folder设置为static/build或将index.html放置在static文件夹中的任何位置。

# assuming, the angular build is in the statis/build directory
app = Flask(__name__, static_folder='static', template_folder='static/build`)

Answer 2

我将角度构建outputPath更改为指向静态文件夹。

    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "my-project/dist/static",// changes
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "src/tsconfig.app.json",
       "assets": [
         "src/assets",
         "src/favicon.ico"
      ],
    },
.
.

    },

将构建静态文件夹移动到服务文件中，并如下更新main.py中的static_folder和template_folder路径。

    cp -r angular/my-project/dist/static service/app 

在main.py中。

    app = Flask(__name__, static_folder='static', template_folder='static')

    @app.route('/')
    def home():
     return render_template('index.html')