Flask 配置靜態資原始檔夾static_url_path、static_folder

非夢nj發表於2018-07-15
Flask

如何動態配置靜態資料夾 static

image

###問題 預設的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/

相關文章