部署静态站点

本指南建立在以下几个假设基础之上：

你正在使用的是默认的构建输出路径（dist）。这个路径可以通过 build.outDir 更改，在这种情况下，你可以从这篇指南中找到所需的指引。
你正在使用 NPM；或者 Yarn 等其他可以运行下面的脚本指令的包管理工具。
Vite 已作为一个本地开发依赖（dev dependency）安装在你的项目中，并且你已经配置好了如下的 npm scripts：

json

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

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

值得注意的是 vite preview 用作预览本地构建，而不应直接作为生产服务器。

注意

本篇指南提供了部署 Vite 静态站点的说明。Vite 也对服务端渲染（SSR）有了实验性的支持。SSR 是指支持在 Node 中运行相应应用的前端框架，预渲染成 HTML，最后在客户端激活（hydrate）。查看 SSR 指南了解更多细节。另一方面，如果你在寻找与传统服务端框架集成的方式，那么请查看后端集成章节。

构建应用

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

bash

$ npm run build

$ npm run build

默认情况下，构建会输出到 dist 文件夹中。你可以部署这个 dist 文件夹到任何你喜欢的平台。

本地测试应用

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

bash

$ npm run build
$ npm run preview

$ npm run build
$ npm run preview

vite preview 命令会在本地启动一个静态 Web 服务器，将 dist 文件夹运行在 http://localhost:4173。这样在本地环境下查看该构建产物是否正常可用就方便多了。

你可以通过 --port 参数来配置服务的运行端口。

json

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

{
  "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>/'。

进入仓库 settings 页面的 GitHub Pages 配置，选择部署来源为“GitHub Actions”，这将引导你创建一个构建和部署项目的工作流程，我们提供了一个安装依赖项和使用 npm 构建的工作流程样本：

yml

# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy static content to Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: ['main']

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# 允许一个并发的部署
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 单次部署的工作描述
  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@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy static content to Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: ['main']

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
  contents: read
  pages: write
  id-token: write

# 允许一个并发的部署
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 单次部署的工作描述
  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@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

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 文件，并包含以下内容。它将使得每次你更改内容时都重新构建与部署站点：

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

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

# 安装 Netlify CLI
$ npm install -g netlify-cli

# 在 Netlify 中创建一个新站点
$ ntl init

# 部署一个独一无二的预览 URL
$ ntl deploy

# 安装 Netlify CLI
$ npm install -g netlify-cli

# 在 Netlify 中创建一个新站点
$ ntl init

# 部署一个独一无二的预览 URL
$ ntl deploy

Netlify CLI 会给你分享一个预览的 URL 来检查部署结果。当你准备好了发布生产版本时，请使用 prod 标志：

bash

# 部署站点到生产环境
$ ntl deploy --prod

# 部署站点到生产环境
$ ntl deploy --prod

Netlify with Git

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

$ 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

将你的代码推送到远程仓库（GitHub, GitLab, Bitbucket）
导入你的 Vite 仓库到 Vercel
Vercel 会检测到你正在使用 Vite，并会为你的部署开启相应的正确配置。
你的应用被部署好了！（示例：vite-vue-template.vercel.app）

在你的项目被导入和部署后，所有对分支的后续推送都会生成预览部署，而所有对生产分支（通常是“main”）的更改都会生成一个生产构建

查看 Vercel 的 Git 集成了解更多细节。

Cloudflare Pages

Cloudflare Pages via Wrangler

安装 Wrangler CLI.
使用 wrangler login、通过你的 Cloudflare 账号完成 Wrangler 身份校验。
运行你的构建命令
使用 npx wrangler pages deploy dist 部署。

bash

# 安装 Wrangler CLI
$ npm install -g wrangler

# 使用 CLI 工具登录 Cloudflare 账号
$ wrangler login

# 运行构建命令
$ npm run build

# 创建一个新的部署
$ npx wrangler pages deploy dist

# 安装 Wrangler CLI
$ npm install -g wrangler

# 使用 CLI 工具登录 Cloudflare 账号
$ wrangler login

# 运行构建命令
$ npm run build

# 创建一个新的部署
$ 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"）的更改都会生成一个 生产构建。

你也可以添加自定义域名，并自定义各个页面的构建设置。查看 Cloudflare 页面与 Git 集成了解更多详情。

Google Firebase

确保已经安装 firebase-tools。

在项目根目录创建 firebase.json 和 .firebaserc 两个文件，包含以下内容：

firebase.json:

json

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

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

.firebaserc:

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

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

运行 npm run build 后，通过 firebase deploy 命令部署。

Surge

首先确保已经安装 surge。
运行 npm run build。
运行 surge dist 命令部署到 surge。

你也可以通过添加 surge dist yourdomain.com 部署到一个自定义域名。

Azure 的静态网站应用

你可以通过微软 Azure 的静态网站应用服务来快速部署你的 Vite 应用。你只需：

注册 Azure 账号并获取一个订阅（subscription）的 key。可以在此处快速完成注册。
将你的应用代码托管到 GitHub。
在 VSCode 中安装 SWA 扩展。

安装完此扩展后，进入你应用的根目录。打开 SWA 的扩展程序，登录 Azure，并点击 '+'，来创建一个全新的 SWA。系统会提示你指定所需的订阅 key。

按照扩展程序的启动向导，给你的应用程序起个名字，选择框架预设，并指定应用程序的根目录（通常为 /）以及构建文件的路径 /dist。此向导完成后，会在你的 repo 中的 .github 文件夹中创建一个 GitHub Action。

这个 action 致力于部署你的应用程序（可以在仓库的 Actions 标签中，查看相关进度），成功完成后，你可以点击 GitHub 中出现的 “浏览站点” 的按钮，查看你的应用程序。

Render

你可以在 Render 部署你的 Vite 应用。

创建一个 Render 账号
在控制台页面点击 New 按钮并选择 Static Site。
链接你的 GitHub/GitLab 账号或使用一个公共仓库
指定一个项目名称和所用分支
- 构建命令：npm run build
- 发布目录：dist
点击 Create Static Site
你的应用将会被部署在 https://<PROJECTNAME>.onrender.com/。

默认情况下，推送到该指定分支的任何新的 commit 都会自动触发一个新的部署。Auto-Deploy 可以在项目设置中部署。

还可以为项目添加一个自定义域名。

Flightcontrol

使用 Flightcontrol 部署静态站点，可以按照说明进行操作。

AWS Amplify 部署

使用 AWS Amplify 部署部署静态站点，可以按照说明进行操作。

Kinsta 静态站点托管

你可以按照这些说明在 Kinsta 上部署你的 Vite 应用作为一个静态站点。

部署静态站点 ​

构建应用 ​

本地测试应用 ​

GitHub Pages ​

GitLab Pages 配合 GitLab CI ​

Netlify ​

Netlify CLI ​

Netlify with Git ​

Vercel ​

Vercel CLI ​

Vercel for Git ​

Cloudflare Pages ​

Cloudflare Pages via Wrangler ​

Cloudflare Pages with Git ​

Google Firebase ​

Surge ​

Azure 的静态网站应用 ​

Render ​

Flightcontrol ​

AWS Amplify 部署 ​

Kinsta 静态站点托管 ​

部署静态站点

构建应用

本地测试应用

GitHub Pages

GitLab Pages 配合 GitLab CI

Netlify

Netlify CLI

Netlify with Git

Vercel

Vercel CLI

Vercel for Git

Cloudflare Pages

Cloudflare Pages via Wrangler

Cloudflare Pages with Git

Google Firebase

Surge

Azure 的静态网站应用

Render

Flightcontrol

AWS Amplify 部署

Kinsta 静态站点托管