我在 FastAPI 中渲染 HTMl 檔案時遇到問題。
main.py檔
#
static_dir = os.path.join(os.path.dirname(__file__), "static")
app.mount("/",StaticFiles(directory=static_dir, html=True),name="static")
@app.get("/")
async def index():
return FileResponse('index.html', media_type='text/html')
使用 uvicorn 運行上述文件時，我能夠渲染 http://127.0.0.1:8765/ 處的 HTML 文件，但靜態文件（例如 css、js 和圖像）不會被渲染。
index.html：HTML 檔案的一些程式碼（由 Angular JS 建構）
<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'"><noscript>
<link rel="stylesheet" href="styles.87afad25367d1df4.css"></noscript></head>
<body class="cui">
test
<app-root></app-root>
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>
</body></html>
檔案結構：
#
modulename
- static
- index.html
- styles.87afad25367d1df4.css
- runtime.7f95ee6540776f88.js
- polyfills.a246e584d5c017d7.js
- main.4f51d0f81827a3db.js
- main.py
- __init__.py
當我打開瀏覽器控制台時，它顯示如下：
CSS/js 應該在不包含靜態的情況下進行渲染，例如http://127.0.0.1:8765/styles.87afad25367d1df4.css 但它在從http://127.0.0.1:8765/static/styles .87afad25367d1df4.css 載入的瀏覽器上運行。
我不確定如何解決這個問題，我們將不勝感激。
更新：新增以下程式碼以更好地解釋
main.py
#
import uvicorn
import os
import webbrowser
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import HTMLResponse
app = FastAPI(
title="UI",
description="This is to test",
)
app.add_middleware(
CORSMiddleware,
allow_origins=['*'],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
static_dir = os.path.join(os.path.dirname(__file__), "static")
app.mount("/",StaticFiles(directory=static_dir, html=True),name="static")
def start_server():
# print('Starting Server...')
uvicorn.run(
"ui.main:app",
host="0.0.0.0",
port=8765,
log_level="debug",
reload=True,
)
# webbrowser.open("http://127.0.0.1:8765/")
if __name__ == "__main__":
start_server()
將此檔案作為 test.py 檔案中的套件/模組運行：
from ui import main
if __name__ == "__main__":
main.start_server()
index.html：
#
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>WingmanUi</title>
<base href="static/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'">
</head>
<body>
This is to test
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>
</body>
</html>
檔案結構：
#
ui
- static
- index.html
- styles.87afad25367d1df4.css
- runtime.7f95ee6540776f88.js
- polyfills.a246e584d5c017d7.js
- main.4f51d0f81827a3db.js
- main.py
- __init__.py
#
首先，當使用##StaticFiles
時html標誌設定為True，以便提供靜態檔案（對於動態網頁，請參閱模板 代替），例如：from fastapi import FastAPI from fastapi.staticfiles import StaticFiles app = FastAPI() app.mount('/static', StaticFiles(directory='static', html=True), name='static')您不必定義端點來服務索引頁，因為html=True
意味著在HTML 模式下運行您的應用程式；因此，FastAPI/Starlette 會自動載入index.html— 請參閱Starlette 文件靜態檔案。另外，如果您需要其他端點，請注意應用程式中定義端點的順序很重要。 。 p> 其次，由於您已安裝StaticFiles
或者，如果實例並指定directory='static'，因此您的靜態檔案預計將從該目錄提供。因此，您要做的就是將所有靜態檔案以及 HTML 檔案移至static目錄中。然後，您應該能夠如下提供靜態檔案（假定您已將StaticFiles實例安裝到/，例如app.mount('/', ...):StaticFiles
就您而言，由於您已將實例安裝到/static，例如app.mount('/static', ...)（另請參閱此答案）：StaticFiles
實例安裝到/，因此靜態檔案仍以static前綴載入的原因，例如http://127.0.0.1:8000/static/someScript.js只是因為您添加了