部署靜態網站

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

您正在使用預設的建置輸出位置 (dist)。此位置可以使用 build.outDir 進行變更，並且您可以在這種情況下從這些指南中推斷出說明。
您正在使用 npm。如果您使用 Yarn 或其他套件管理器，可以使用等效的命令來執行腳本。
Vite 已作為本機開發依賴項安裝在您的專案中，並且您已設定以下 npm 腳本

package.json

json

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

請務必注意，vite preview 旨在於在本機預覽建置，而不是作為生產伺服器。

注意

這些指南提供了執行 Vite 網站靜態部署的說明。Vite 也支援伺服器端渲染。SSR 是指支援在 Node.js 中執行相同應用程式、將其預先渲染為 HTML，並最終在用戶端進行水合的前端框架。請查看SSR 指南以了解此功能。另一方面，如果您正在尋找與傳統伺服器端框架的整合，請改為查看後端整合指南。

建置應用程式

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

bash

$ npm run build

預設情況下，建置輸出將放置在 dist。您可以將此 dist 資料夾部署到您偏好的任何平台。

在本機測試應用程式

建置應用程式後，您可以執行 npm run preview 命令在本機進行測試。

bash

$ npm run preview

vite preview 命令將啟動一個本機靜態網路伺服器，該伺服器在 http://localhost:4173 上提供來自 dist 的檔案。這是一種簡單的方式來檢查生產版本在您的本機環境中看起來是否正常。

您可以透過傳遞 --port 標誌作為參數來設定伺服器的連接埠。

package.json

json

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

現在，preview 命令將在 http://localhost:8080 上啟動伺服器。

GitHub Pages

在 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 設定，並選擇部署來源為「GitHub Actions」，這將引導您建立一個工作流程來建置和部署您的專案，並提供一個安裝相依性並使用 npm 進行建置的範例工作流程

yml

# 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@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        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:16.5.0
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

安裝 Netlify CLI。
使用 ntl init 建立一個新網站。
使用 ntl deploy 部署。

bash

# Install the Netlify CLI
$ npm install -g netlify-cli

# Create a new site in Netlify
$ ntl init

# Deploy to a unique preview URL
$ ntl deploy

Netlify CLI 將與您分享一個預覽 URL 以進行檢查。當您準備好進入生產環境時，請使用 prod 標誌

bash

# Deploy the site into production
$ ntl deploy --prod

使用 Git 的 Netlify

將您的程式碼推送至 git 儲存庫 (GitHub、GitLab、BitBucket、Azure DevOps)。
將專案匯入至 Netlify。
選擇分支、輸出目錄，並在適用的情況下設定環境變數。
按一下 Deploy。
您的 Vite 應用程式已部署！

在您的專案匯入並部署後，所有後續對生產分支以外的分支的推送以及提取請求都將產生預覽部署，並且對生產分支 (通常為「main」) 所做的所有變更都將導致生產部署。

Vercel

Vercel CLI

安裝 Vercel CLI 並執行 vercel 以進行部署。
Vercel 將偵測到您正在使用 Vite，並將為您的部署啟用正確的設定。
您的應用程式已部署！(例如，vite-vue-template.vercel.app)

bash

$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

使用 Git 的 Vercel

將您的程式碼推送至您的 git 儲存庫 (GitHub、GitLab、Bitbucket)。
將您的 Vite 專案匯入至 Vercel。
Vercel 將偵測到您正在使用 Vite，並將為您的部署啟用正確的設定。
您的應用程式已部署！(例如，vite-vue-template.vercel.app)

在您的專案匯入並部署後，所有後續對分支的推送都將產生預覽部署，並且對生產分支 (通常為「main」) 所做的所有變更都將導致生產部署。

了解更多關於 Vercel 的 Git 整合。

Cloudflare Pages

透過 Wrangler 的 Cloudflare Pages

安裝 Wrangler CLI。
使用 wrangler login 使用您的 Cloudflare 帳戶驗證 Wrangler。
執行您的建置命令。
使用 npx wrangler pages deploy dist 部署。

bash

# Install Wrangler CLI
$ npm install -g wrangler

# Login to Cloudflare account from CLI
$ wrangler login

# Run your build command
$ npm run build

# Create new deployment
$ npx wrangler pages deploy dist

在您的資產上傳後，Wrangler 將為您提供一個預覽 URL 以檢查您的網站。當您登入 Cloudflare Pages 儀表板時，您將看到您的新專案。

使用 Git 的 Cloudflare Pages

將您的程式碼推送至您的 git 儲存庫 (GitHub、GitLab)。
登入 Cloudflare 儀表板，並在 帳戶主頁 > 頁面中選取您的帳戶。
選取 建立新專案 和 連接 Git 選項。
選取您要部署的 git 專案，然後按一下 開始設定
根據您已選取的 Vite 框架，在建置設定中選取對應的框架預設。
然後儲存並部署！
您的應用程式已部署！(例如 https://<PROJECTNAME>.pages.dev/)

在您的專案匯入並部署後，所有後續對分支的推送都將產生預覽部署，除非您在分支建置控制項中指定不要這樣做。對生產分支 (通常為「main」) 的所有變更都將導致生產部署。

您也可以在 Pages 上新增自訂網域並處理自訂建置設定。了解更多關於 Cloudflare Pages Git 整合。

Google Firebase

請確保您已安裝 firebase-tools。

在您的專案根目錄中建立 firebase.json 和 .firebaserc，並包含以下內容

firebase.json

json

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

.firebaserc

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

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

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。精靈將會執行，並在您的儲存庫的 .github 資料夾中建立一個 GitHub Action。

該 Action 將會部署您的應用程式（在您儲存庫的 Actions 標籤中觀看其進度），成功完成後，您可以點擊 GitHub Action 執行後出現的「瀏覽網站」按鈕，在擴充功能的進度視窗中提供的位址檢視您的應用程式。

Render

您可以將您的 Vite 應用程式以靜態網站的形式部署在 Render 上。

建立一個 Render 帳戶。
在儀表板中，點擊 New 按鈕並選擇 Static Site。
連接您的 GitHub/GitLab 帳戶或使用公開儲存庫。
指定專案名稱和分支。
- 建置指令：npm install && npm run build
- 發佈目錄：dist
點擊 Create Static Site。
您的應用程式應該部署在 https://<專案名稱>.onrender.com/。

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

您也可以為您的專案新增自訂網域。

Flightcontrol

使用 Flightcontrol 部署您的靜態網站，請按照這些指示進行操作。

Kinsta Static Site Hosting

使用 Kinsta 部署您的靜態網站，請按照這些指示進行操作。

xmit Static Site Hosting

使用 xmit 部署您的靜態網站，請按照此指南進行操作。

部署靜態網站 ​

建置應用程式 ​

在本機測試應用程式 ​

GitHub Pages ​

GitLab Pages 和 GitLab CI ​

Netlify ​

Netlify CLI ​

使用 Git 的 Netlify ​

Vercel ​

Vercel CLI ​

使用 Git 的 Vercel ​

Cloudflare Pages ​

透過 Wrangler 的 Cloudflare Pages ​

使用 Git 的 Cloudflare Pages ​

Google Firebase ​

Surge ​

Azure Static Web Apps ​

Render ​

Flightcontrol ​

Kinsta Static Site Hosting ​

xmit Static Site Hosting ​

部署靜態網站

建置應用程式

在本機測試應用程式

GitHub Pages

GitLab Pages 和 GitLab CI

Netlify

Netlify CLI

使用 Git 的 Netlify

Vercel

Vercel CLI

使用 Git 的 Vercel

Cloudflare Pages

透過 Wrangler 的 Cloudflare Pages

使用 Git 的 Cloudflare Pages

Google Firebase

Surge

Azure Static Web Apps

Render

Flightcontrol

Kinsta Static Site Hosting

xmit Static Site Hosting