部署静态站点

以下指南基于一些共同的假设：

你正在使用默认的构建输出目录（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