Flask 配置静态资源文件夹static_url_path、static_folder

如何动态配置静态文件夹 static

###问题 默认的Flask项目文件结构是这样的:

/app.py
/static
    /js
    /css
    /img
/templates
    /index.html
复制代码

然后，你的前端访问后台静态资源，是通过这个/static/file.nameurl:

<link as=style href=/static/css/app.697eaad8.css rel=preload>
<img src="/static/img/mylogo.jpg" />
复制代码

问题来了，在有些前端应用中，资源文件必须要使用根路径/！ 比如PWA的manifest文件：

<link rel=manifest href=/manifest.json>
复制代码

如何让Flask访问到这些根路径的文件呢？

###解决 文档：http://flask.pocoo.org/docs/1.0/api/#configuration class flask.Flask(import_name, static_url_path=None, static_folder='static', static_host=None, host_matching=False, subdomain_matching=False, template_folder='templates', instance_path=None, instance_relative_config=False, root_path=None)

配置一下static_url_path、static_folder就可以了。

• static_url_path: 前端访问资源文件的前缀目录。默认是/static，就是前端必须这样访问：<img src="/static/img/mylogo.jpg" /> 我们改成 ''，就可以这样访问了：<img src="/img/mylogo.jpg" />。就达到前端从根目录访问的目的了。
• static_folder: 后端存储资源文件的目录。默认是/static，就是指明你后端的资源文件，是放在<your project>/static/目录下，一般不需要改动。

###一个粟子：

from flask import Flask, render_template

app = Flask(__name__, static_url_path='')

@app.route('/')
def index():
    return render_template('index.html')
复制代码

源码：https://github.com/kevinqqnj/flask-vue-pwa PWA演示：https://flask-vue-pwa.herokuapp.com/