Bagaimana untuk membuat FastAPI melaksanakan SSR untuk Vue 3?
<p>Menurut dokumentasi SSR Vue, adalah mungkin untuk membuat aplikasi menggunakan node.js dan mengembalikannya menggunakan pelayan Express. Bolehkah FastAPI melakukan perkara yang sama? </p>
<p>Atau adakah menggunakan templat Jinja2 atau SPA satu-satunya penyelesaian? </p>
<h3>Soalan: </h3>
<ul>
<li>Tiada SPA: Membantu dengan SEO</li>
<li>Tiada SSG: Terlalu banyak halaman akan dijana. Sesetengahnya perlu dijana secara dinamik. </li>
<li>Tiada templat Jinja2/Python: Modul nod tidak akan dibina, digabungkan dan disampaikan. Semua modul mesti disampaikan melalui CDN pakej jauh. </li>
</ul>
<p>Saya mempunyai perasaan bahawa mungkin menukar pembatas Vue 3 dan kemudian membina projek dan menyediakan fail sebagai templat Jinja2 akan menjadi penyelesaiannya, tetapi saya tidak pasti bagaimana ia akan berfungsi dengan penghala Vue. Saya tahu bahawa folder <code>/dist</code> boleh disampaikan pada laluan lalai dan kemudian menggunakan catch-all yang boleh digunakan untuk menunjukkan fail yang sebenarnya wujud. </p>
<h3>Penyelesaian yang mungkin</h3>
<pre class="brush:py;toolbar:false;">@app.get("/", response_class=FileResponse)
def read_index(permintaan: Permintaan):
indeks = f"{static_folder}/index.html"
kembalikan FileResponse(indeks)
@app.get("/{catchall:path}", response_class=FileResponse)
def read_index(permintaan: Permintaan):
laluan = request.path_params["catchall"]
fail = static_folder + laluan
jika os.path.exists(fail):
kembalikan FileResponse(fail)
indeks = f"{static_folder}/index.html"
kembalikan FileResponse(indeks)
</pra>
<h3>Soalan</h3>
<ul>
<li>Jika ada cara untuk melakukan SSR menggunakan FastAPI dan Vue 3, apakah cara itu? </li>
<li>Jika tiada cara langsung, bagaimana untuk menggabungkan <kod>/dist</code> terbina dalam Vue dengan templat Jinja2 untuk menyediakan halaman dinamik? </li>
</ul></p>
