部署静态站点

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

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

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

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

注意

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

构建应用

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

$ npm run build

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

本地测试应用

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

$ npm run build
$ npm run preview

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

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

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

现在 preview 命令会将服务器运行在 http://localhost:8080。