部署静态站点

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

您正在使用默认的构建输出位置 (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 命令将启动一个本地静态 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 安装依赖项并进行构建

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。
选择分支、输出目录，并在适用时设置环境变量。
点击部署。
您的 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 将 Wrangler 认证到您的 Cloudflare 帐户。
运行您的构建命令。
使用 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 仪表板，并在帐户主页>Pages 中选择您的帐户。
选择创建新项目和连接 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 静态 Web 应用

您可以使用 Microsoft Azure 静态 Web 应用服务快速部署您的 Vite 应用程序。您需要

一个 Azure 帐户和一个订阅密钥。您可以在此处创建一个免费的 Azure 帐户。
您的应用程序代码推送到GitHub。
在Visual Studio Code 中的SWA 扩展。

在 VS Code 中安装扩展并导航到您的应用程序根目录。打开静态 Web 应用扩展，登录 Azure，然后单击“+”号以创建新的静态 Web 应用。系统将提示您指定要使用的哪个订阅密钥。

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

该操作将部署您的应用程序（在您的存储库的操作选项卡中查看其进度），并且在成功完成后，您可以通过单击 GitHub 操作运行后出现的扩展进度窗口中提供的“浏览网站”按钮，在提供的地址中查看您的应用程序。

Render

您可以将您的 Vite 应用程序作为静态站点部署到Render。

创建一个Render 帐户。
在仪表盘中，点击新建按钮并选择静态站点。
连接您的 GitHub/GitLab 帐户或使用公共存储库。
指定项目名称和分支。
- 构建命令：npm install && npm run build
- 发布目录：dist
点击创建静态站点。
您的应用程序应部署在https://.onrender.com/。

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

您还可以将自定义域名添加到您的项目。

Flightcontrol

按照这些说明，使用Flightcontrol 部署您的静态站点。

Kinsta 静态站点托管

按照这些说明，使用Kinsta 部署您的静态站点。

xmit 静态站点托管

按照此指南，使用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 静态 Web 应用 ​

Render ​

Flightcontrol ​

Kinsta 静态站点托管 ​

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 静态 Web 应用

Render

Flightcontrol

Kinsta 静态站点托管

xmit 静态站点托管