部署静态站点

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

你正在使用默认的构建输出位置 (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，最后在客户端对其进行 hydration 的前端框架。查看 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.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 安装依赖项并构建

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@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        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@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: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

安装 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

Netlify with Git

将你的代码推送到 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`.

Vercel for Git

将你的代码推送到你的 Git 存储库（GitHub、GitLab、Bitbucket）。
将你的 Vite 项目导入到 Vercel。
Vercel 将检测到你正在使用 Vite，并将为你的部署启用正确的设置。
你的应用程序已部署！ (例如 vite-vue-template.vercel.app)

在你的项目被导入和部署后，所有后续推送到分支都将生成预览部署，并且对生产分支（通常为“main”）所做的所有更改都将导致生产部署。

了解有关 Vercel 的 Git 集成的更多信息。

Cloudflare Pages

Cloudflare Pages 通过 Wrangler

安装 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 仪表板时，你将看到你的新项目。

Cloudflare Pages with Git

将你的代码推送到你的 Git 存储库（GitHub、GitLab）。
登录到 Cloudflare 仪表板，然后在 Account Home > Pages 中选择你的帐户。
选择 Create a new Project 和 Connect Git 选项。
选择你要部署的 Git 项目，然后单击 Begin setup
根据你选择的 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。
SWA 扩展在 Visual Studio Code 中。

在 VS Code 中安装该扩展并导航到你的应用根目录。打开 Static Web Apps 扩展，登录到 Azure，然后单击“+”符号以创建一个新的 Static Web App。系统将提示你指定要使用的订阅密钥。

按照扩展启动的向导为你的应用命名，选择一个框架预设，并指定应用根目录（通常为 /）和构建的文件位置 /dist。该向导将运行，并将在你的存储库中的 .github 文件夹中创建一个 GitHub 操作。

该操作将部署你的应用（在你的存储库的 Actions 选项卡中观看其进度），并且成功完成后，你可以通过单击 GitHub 操作运行时出现的“Browse Website”按钮来查看扩展的进度窗口中提供的地址中的应用。

Render

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

创建一个 Render 帐户。
在仪表板中，单击 New 按钮并选择 Static Site。
连接你的 GitHub/GitLab 帐户或使用公共存储库。
指定项目名称和分支。
- 构建命令：npm install && npm run build
- 发布目录：dist
单击 Create Static Site。
你的应用应该已部署在 https://<PROJECTNAME>.onrender.com/ 上。

默认情况下，推送到指定分支的任何新提交都会自动触发新的部署。自动部署可以在项目设置中配置。

你还可以向你的项目添加一个自定义域。

Flightcontrol

使用 Flightcontrol 部署你的静态站点，按照这些说明进行操作。

Kinsta Static Site Hosting

使用 Kinsta 部署你的静态站点，按照这些说明进行操作。

xmit Static Site Hosting

使用 xmit 部署你的静态站点，按照此指南进行操作。

部署静态站点 ​

构建应用 ​

本地测试应用 ​

GitHub Pages ​

GitLab Pages 和 GitLab CI ​

Netlify ​

Netlify CLI ​

Netlify with Git ​

Vercel ​

Vercel CLI ​

Vercel for Git ​

Cloudflare Pages ​

Cloudflare Pages 通过 Wrangler ​

Cloudflare Pages with Git ​

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

Netlify with Git

Vercel

Vercel CLI

Vercel for Git

Cloudflare Pages

Cloudflare Pages 通过 Wrangler

Cloudflare Pages with Git

Google Firebase

Surge

Azure Static Web Apps

Render

Flightcontrol

Kinsta Static Site Hosting

xmit Static Site Hosting