部署靜態站點

以下指南基於一些共同的假設：

你正在使用預設的構建輸出目錄（dist）。如果該位置透過 build.outDir 進行了更改，你可以根據這些指南推斷出相應的操作。
你正在使用 npm。如果你使用 Yarn 或其他包管理器，可以使用等效的命令來執行指令碼。
Vite 作為專案的本地開發依賴安裝，並且你已經設定了以下 npm 指令碼：

package.json

json

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

需要注意，vite preview 旨在本地預覽構建結果，並不作為生產環境伺服器使用。

注意

這些指南提供了部署 Vite 靜態站點的說明。Vite 也支援服務端渲染（SSR）。SSR 是指前端框架支援在 Node.js 中執行相同的應用程式，將其預渲染為 HTML，最後在客戶端進行注水（Hydration）。檢視 SSR 指南以瞭解此功能。另一方面，如果你正在尋找與傳統後端框架的整合，請檢視後端整合指南。

構建應用

你可以執行 npm run build 命令來構建應用程式。

bash

$ npm run build

預設情況下，構建輸出將放置在 dist 資料夾中。你可以將此 dist 資料夾部署到你首選的任何平臺。

本地測試應用

構建應用後，你可以透過執行 npm run preview 命令在本地進行測試。

bash

$ npm run preview

vite preview 命令將啟動一個本地靜態 Web 伺服器，從 dist 資料夾提供檔案，地址為 https://:4173。這是檢查生產環境構建在本地環境下是否正常執行的簡便方法。

你可以透過傳遞 --port 引數來配置伺服器埠。

package.json

json

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

現在，preview 命令將會在 https://:8080 啟動伺服器。

GitHub Pages

更新 Vite 配置
在 vite.config.js 中設定正確的 base。
如果你部署到 https://<USERNAME>.github.io/，或者透過 GitHub Pages 部署到自定義域名（例如 www.example.com），請將 base 設定為 '/'。或者，你也可以從配置中刪除 base，因為它預設為 '/'。
如果你部署到 https://<USERNAME>.github.io/<REPO>/（例如，你的倉庫地址為 https://github.com/<USERNAME>/<REPO>），請將 base 設定為 '/<REPO>/'。
啟用 GitHub Pages
在你的倉庫中，前往 Settings → Pages。在 Build and deployment 下，開啟 Source 下拉選單，選擇 GitHub Actions。
GitHub 現在將使用 GitHub Actions 工作流部署你的網站，這對於需要構建步驟的 Vite 專案是必需的。

建立工作流

在你的倉庫中建立一個新檔案 .github/workflows/deploy.yml。你也可以在上一步中點選 “create your own”，這將為你生成一個入門工作流檔案。

以下是一個示例工作流，它會在你將更改推送到 main 分支時安裝依賴、構建站點並進行部署：

.github/workflows/deploy.yml

yaml

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      - name: Set up Node
        uses: actions/setup-node@v6
        with:
          node-version: lts/*
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

GitLab Pages 和 GitLab CI

在 vite.config.js 中設定正確的 base。
如果你部署到 https://<USERNAME or GROUP>.gitlab.io/，可以省略 base，因為它預設為 '/'。
如果你部署到 https://<USERNAME or GROUP>.gitlab.io/<REPO>/（例如，你的倉庫地址為 https://gitlab.com/<USERNAME>/<REPO>），請將 base 設定為 '/<REPO>/'。

在專案根目錄建立一個名為 .gitlab-ci.yml 的檔案，內容如下。這將會在你更新內容時構建並部署你的站點：

.gitlab-ci.yml

yaml

image: node:lts
pages:
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - cp -a dist/. public/
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Netlify

Netlify CLI

透過 npm install -g netlify-cli 安裝 Netlify CLI。
使用 netlify init 建立新站點。
使用 netlify deploy 進行部署。

Netlify CLI 將為你提供一個預覽 URL 以供檢查。當你準備好釋出到生產環境時，請使用 prod 標誌：netlify deploy --prod。

使用 Git 部署 Netlify

將程式碼推送到 Git 倉庫（GitHub、GitLab、BitBucket、Azure DevOps）。
匯入專案到 Netlify。
選擇分支、輸出目錄，並根據需要設定環境變數。
點選 Deploy。
你的 Vite 應用已部署完畢！

專案匯入並部署後，後續推送到非生產分支的操作及合併請求（Pull Request）都會生成預覽部署；而對生產分支（通常為 “main”）的任何更改都將觸發生產部署。

Vercel

Vercel CLI

透過 npm i -g vercel 安裝 Vercel CLI，然後執行 vercel 進行部署。
Vercel 會檢測到你正在使用 Vite 併為你啟用正確的部署配置。
你的應用已部署完畢！（例如 vite-vue-template.vercel.app）

使用 Git 部署 Vercel

將程式碼推送到 Git 倉庫（GitHub、GitLab、Bitbucket）。
匯入你的 Vite 專案到 Vercel。
Vercel 會檢測到你正在使用 Vite 併為你啟用正確的部署配置。
你的應用已部署完畢！（例如 vite-vue-template.vercel.app）

專案匯入並部署後，後續推送到分支的操作都會生成預覽部署；而對生產分支（通常為 “main”）的任何更改都將觸發生產部署。

瞭解更多關於 Vercel Git 整合的資訊。

Cloudflare

Cloudflare Workers

Cloudflare Vite 外掛提供了與 Cloudflare Workers 的整合，並利用 Vite 的 Environment API 在開發過程中在 Cloudflare Workers 執行時中執行你的服務端程式碼。

要將 Cloudflare Workers 新增到現有的 Vite 專案中，請安裝該外掛並將其新增到你的配置中：

bash

$ npm install --save-dev @cloudflare/vite-plugin

vite.config.js

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  plugins: [cloudflare()],
})

wrangler.jsonc

jsonc

{
  "name": "my-vite-app",
}

執行 npm run build 後，你的應用程式現在可以使用 npx wrangler deploy 進行部署。

你還可以輕鬆地向 Vite 應用程式新增後端 API，以安全地與 Cloudflare 資源進行通訊。這在開發階段運行於 Workers 執行時，並與前端一起部署。有關完整演練，請參閱 Cloudflare Vite 外掛教程。

Cloudflare Pages

使用 Git 部署 Cloudflare Pages

Cloudflare Pages 提供了一種無需管理 Wrangler 檔案即可直接部署到 Cloudflare 的方式。

將程式碼推送到 Git 倉庫（GitHub、GitLab）。
登入 Cloudflare 儀表盤，在 Account Home > Workers & Pages 中選擇你的賬戶。
選擇 Create a new Project 和 Pages 選項，然後選擇 Git。
選擇要部署的 Git 專案並點選 Begin setup。
根據你選擇的 Vite 框架，在構建設定中選擇相應的框架預設。否則，請輸入專案的構建命令和預期的輸出目錄。
然後儲存並部署！
你的應用已部署完畢！（例如 https://<PROJECTNAME>.pages.dev/）

專案匯入並部署後，後續推送到分支的操作都會生成預覽部署（除非你在分支構建控制中另有設定）。對生產分支（通常為 “main”）的所有更改都將導致生產部署。

你還可以為 Pages 新增自定義域名並處理自定義構建設定。瞭解更多關於 Cloudflare Pages Git 整合的資訊。

Google Firebase

透過 npm i -g firebase-tools 安裝 firebase-tools。

在專案根目錄建立以下檔案：

firebase.json.firebaserc

json

{
  "hosting": {
    "public": "dist",
    "ignore": [],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

執行 npm run build 後，使用 firebase deploy 命令進行部署。

Surge

透過 npm i -g surge 安裝 surge。
執行 npm run build。
透過輸入 surge dist 部署到 Surge。

你也可以透過新增 surge dist yourdomain.com 部署到自定義域名。

Azure Static Web Apps

你可以使用 Microsoft Azure Static Web Apps 服務快速部署 Vite 應用。你需要：

一個 Azure 賬戶和訂閱金鑰。你可以在這裡建立一個免費的 Azure 賬戶。
你的應用程式碼推送到 GitHub。
Visual Studio Code 中的 SWA 擴充套件。

在 VS Code 中安裝該擴充套件並導航到應用根目錄。開啟 Static Web Apps 擴充套件，登入 Azure，然後點選 '+' 號建立一個新的 Static Web App。系統將提示你選擇要使用的訂閱金鑰。

按照擴充套件啟動的嚮導操作，為你的應用命名，選擇框架預設，並指定應用根目錄（通常為 /）和構建檔案位置 /dist。嚮導將執行並在你 repo 的 .github 資料夾中建立一個 GitHub Action。

該 Action 將會部署你的應用（可在 repo 的 Actions 選項卡中檢視進度）。成功完成後，你可以點選 Action 執行後擴充套件進度視窗中出現的“瀏覽網站”按鈕，檢視你的應用。

Render

你可以將 Vite 應用作為靜態站點部署在 Render 上。

建立一個 Render 賬戶。
在儀表盤中，點選 New 按鈕並選擇 Static Site。
連線你的 GitHub/GitLab 賬戶或使用公共倉庫。
指定專案名稱和分支。
- Build Command: npm install && npm run build
- Publish Directory: dist
點選 Create Static Site。你的應用應該會部署在 https://<PROJECTNAME>.onrender.com/。

預設情況下，任何推送到指定分支的新提交都會自動觸發新的部署。自動部署可以在專案設定中進行配置。

你還可以為專案新增自定義域名。

Flightcontrol

按照這些說明，使用 Flightcontrol 部署你的靜態站點。

Kinsta Static Site Hosting

按照這些說明，使用 Kinsta 部署你的靜態站點。

xmit Static Site Hosting

按照此指南，使用 xmit 部署你的靜態站點。

Zephyr Cloud

Zephyr Cloud 是一個直接整合到構建過程中的部署平臺，為模組聯邦（Module Federation）及其他型別的應用提供全球邊緣分發。

Zephyr 採用了與其他雲提供商不同的方法。它直接與 Vite 構建過程整合，因此每次你構建或執行應用程式的開發伺服器時，它都會自動部署到 Zephyr Cloud。

請按照 Vite 部署指南中的步驟開始操作。

EdgeOne Pages

按照這些說明，使用 EdgeOne Pages 部署你的靜態站點。

部署靜態站點 ​

構建應用 ​

本地測試應用 ​

GitHub Pages ​

GitLab Pages 和 GitLab CI ​

Netlify ​

Netlify CLI ​

使用 Git 部署 Netlify ​

Vercel ​

Vercel CLI ​

使用 Git 部署 Vercel ​

Cloudflare ​

Cloudflare Workers ​

Cloudflare Pages ​

使用 Git 部署 Cloudflare Pages ​

Google Firebase ​

Surge ​

Azure Static Web Apps ​

Render ​

Flightcontrol ​

Kinsta Static Site Hosting ​

xmit Static Site Hosting ​

Zephyr Cloud ​

EdgeOne Pages ​

部署靜態站點

構建應用

本地測試應用

GitHub Pages

GitLab Pages 和 GitLab CI

Netlify

Netlify CLI

使用 Git 部署 Netlify

Vercel

Vercel CLI

使用 Git 部署 Vercel

Cloudflare

Cloudflare Workers

Cloudflare Pages

使用 Git 部署 Cloudflare Pages

Google Firebase

Surge

Azure Static Web Apps

Render

Flightcontrol

Kinsta Static Site Hosting

xmit Static Site Hosting

Zephyr Cloud

EdgeOne Pages