静态站点部署

vite-main使用指南

静态站点部署

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

你使用的是默认构建输出目录（dist）。该目录位置可通过 build.outDir 配置进行修改，在这种情况下，你可以从这些指南中推断出相应的操作步骤。
你使用的是 npm。如果你使用 Yarn 或其他包管理器，可以使用等效命令来运行脚本。
Vite 已作为本地开发依赖安装在你的项目中，并且你已经配置了以下 npm 脚本：

json [package.json] 复制代码

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

需要注意的是，vite preview 用于在本地预览构建产物，并非生产服务器。

::: tip 提示
这些指南提供了将 Vite 站点进行静态部署的操作说明。Vite 也支持服务端渲染（SSR）。SSR 指的是前端框架支持在 Node.js 中运行同一个应用、将其预渲染为 HTML，并最终在客户端进行水合（hydrating）。请查阅 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 参数来配置服务器的端口。

json [package.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

在你的仓库中，前往 Settings → Pages。在 Build and deployment 下，打开 Source 下拉菜单，选择 GitHub Actions。

GitHub 将使用 GitHub Actions 工作流来部署你的站点，这是必要的，因为 Vite 需要构建步骤才能进行部署。
创建工作流

在你的仓库中创建一个新文件 .github/workflows/deploy.yml。你也可以点击上一步中的 “create your own”，这会为你生成一个入门工作流文件。

以下是一个示例工作流，它使用 npm 安装依赖、构建站点，并在你向 main 分支推送更改时进行部署：

<<< ./static-deploy-github-pages.yaml#content [.github/workflows/deploy.yml]

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 [.gitlab-ci.yml] 复制代码

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。

Netlify 与 Git 集成

将代码推送到 Git 仓库（GitHub、GitLab、BitBucket、Azure DevOps）。
导入项目到 Netlify。
选择分支、输出目录，并设置环境变量（如果适用）。
点击 Deploy。
你的 Vite 应用已部署！

项目导入并部署后，所有后续推送到非生产分支的更改以及拉取请求将生成预览部署，而对生产分支（通常是 “main”）的所有更改将生成生产部署。

Vercel

Vercel CLI

通过 npm i -g vercel 安装 Vercel CLI，然后运行 vercel 进行部署。
Vercel 会检测到你正在使用 Vite，并为你的部署启用正确的设置。
你的应用已部署！（例如 vite-vue-template.vercel.app）

Vercel 与 Git 集成

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

js [vite.config.js] 复制代码

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  plugins: [cloudflare()],
})

jsonc [wrangler.jsonc] 复制代码

{
  "name": "my-vite-app",
}

运行 npm run build 后，你的应用现在可以使用 npx wrangler deploy 进行部署。

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

Cloudflare Pages

Cloudflare Pages 与 Git 集成

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。

在项目根目录创建以下文件：

::: code-group

json [firebase.json] 复制代码

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

js [.firebaserc] 复制代码

{
  "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

你可以将你的 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 部署你的静态站点。

xmit Static Site Hosting

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

Zephyr Cloud

Zephyr Cloud 是一个部署平台，它直接集成到你的构建过程中，为模块联邦和其他类型的应用提供全球边缘分发。

Zephyr 采用了与其他云提供商不同的方法。它直接与 Vite 构建过程集成，因此每次你构建或运行应用的开发服务器时，它都会自动部署到 Zephyr Cloud。

按照 Vite 部署指南中的步骤开始使用。

EdgeOne Pages

按照以下说明，使用 EdgeOne Pages 部署你的静态站点。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。