共用方式為


使用 Azure Static Web Apps 設定前端架構和程式庫

Azure Static Web Apps 要求您針對前端架構或程式庫,提供組建設定檔中適當的設定值。

組態

下表列出一系列架構和程式庫 1 的設定。

下列項目說明資料表資料行的意圖:

  • 輸出位置 (應用程式成品位置):列出 output_location 的值,即已建置靜態網站檔案的資料夾
  • API 成品位置 (API 位置):列出 api_location 的值,此資料夾包含已建置的受控 Azure Functions,用在需要伺服器端託管的架構中。
  • 自訂組建命令:架構需要不同於 npm run buildnpm run azure:build 的命令時,您可以定義自訂組建命令

注意

某些具有伺服器端轉譯功能的 Web 架構,而且可以部署至 Azure Static Web Apps。 這表示您的應用程式會與 Azure Functions 一起內建在靜態資產中。 在設定檔中,靜態資產會對應至輸出位置,而 Azure Functions 檔案會對應至 API 成品位置

架構 輸出位置 (應用程式成品位置) API 成品位置 自訂組建命令
Alpine.js / n/a n/a 2
Angular dist/<APP_NAME>/browser n/a n/a
Astro dist n/a n/a
Aurelia dist n/a n/a
Backbone.js / n/a n/a
Blazor (WASM) wwwroot n/a n/a
Ember dist n/a n/a
Flutter build/web n/a flutter build web
Framework7 www n/a npm run build-prod
Glimmer dist n/a n/a
HTML / n/a n/a
Hugo public n/a n/a
Hyperapp / n/a n/a
JavaScript / n/a n/a
jQuery / n/a n/a
KnockoutJS dist n/a n/a
LitElement / n/a n/a
Mithril / n/a n/a
Next.js (靜態 HTML 匯出) out n/a n/a
Next.js (混合式轉譯) / n/a n/a
Nuxt 2 / n/a n/a
Nuxt 3 output/public output/server n/a
Preact dist n/a n/a
React build n/a n/a
RedwoodJS web/dist n/a yarn rw build web
Solid dist n/a n/a
樣板 www n/a n/a
SvelteKit (靜態) build n/a n/a
SvelteKit build/static build/server n/a
Three.js / n/a n/a
TypeScript dist n/a n/a
Vue.js dist n/a n/a

1 上表並非搭配 Azure Static Web Apps 使用的架構和程式庫完整清單。

2 不適用

下一步