部署静态站点

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

你使用的是默认构建输出位置（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 并最终在客户端激活的前端框架。查看 SSR 指南了解此功能。另一方面，如果你正在寻找与传统服务端框架的集成，请查看后端集成指南。

构建应用

你可以运行 npm run build 命令来构建应用。

bash

$ npm run build

默认情况下，构建输出将放置在 dist。你可以将此 dist 文件夹部署到任何你喜欢的平台。

本地测试应用

构建应用后，你可以通过运行 npm run preview 命令在本地测试它。

bash

$ npm run preview

vite preview 命令将启动一个本地静态 Web 服务器，在 http://localhost:4173 提供来自 dist 的文件。这是一种检查生产构建在本地环境中看起来是否正常的简单方法。

你可以通过传递 --port 标志作为参数来配置服务器的端口。

package.json

json

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

现在 preview 命令将在 http://localhost: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
在你的仓库中，转到 设置 → Pages。在 构建和部署 下，打开源下拉菜单，并选择 GitHub Actions。
GitHub 现在将使用 GitHub Actions 工作流部署你的站点，这是必要的，因为 Vite 需要构建步骤才能部署。

创建工作流

在你的仓库中创建一个新文件 .github/workflows/deploy.yml。你也可以从上一步点击 “创建你自己的”，这将为你生成一个起始工作流文件。

这是一个示例工作流，它使用 npm 安装依赖，构建站点，并在你推送更改到 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@v6
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v5
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v5

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。
选择分支、输出目录，并设置环境变量（如果适用）。
点击部署。
你的 Vite 应用已部署！

导入并部署项目后，所有后续推送到非生产分支的操作以及拉取请求都将生成预览部署，而对生产分支（通常是"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 的环境 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 进行部署。

你还可以轻松地将后端 API 添加到你的 Vite 应用，以便与 Cloudflare 资源安全通信。这在开发期间运行在 Workers 运行时中，并与你的前端一起部署。查看 Cloudflare Vite 插件教程了解完整的演练。

Cloudflare Pages

使用 Git 部署 Cloudflare Pages

Cloudflare Pages 提供了一种直接部署到 Cloudflare 而无需管理 Wrangler 文件的方法。

将代码推送到你的 git 仓库（GitHub、GitLab）。
登录 Cloudflare 控制台并在 账户主页 > Workers & Pages 中选择你的账户。
选择 创建新项目 和 Pages 选项，然后选择 Git。
选择你要部署的 git 项目并点击 开始设置
根据你选择的 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。向导将运行并在你的仓库的 .github 文件夹中创建一个 GitHub action。

该 action 将部署你的应用（在仓库的 Actions 标签页中查看进度），当成功完成后，你可以通过点击 GitHub action 运行后出现的 'Browse Website' 按钮，在扩展进度窗口中提供的地址查看你的应用。

Render

你可以在 Render 上将你的 Vite 应用部署为静态站点。

创建一个 Render 账户。
在 Dashboard 中，点击 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 是一个部署平台，它直接集成到你的构建过程中，并为模块联邦和其他类型的应用提供全球边缘分发。

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