有许多服务可以轻松部署应用程序。将其全部列出是不可能的，因此我们将专注于通用的部署流程和一些常见服务的具体细节。
如果缺少您常用的部署工具，欢迎在 GitHub 上创建一个 Pull Request 将其添加到列表中。
通用部署
部署 Quasar SPA 的第一步总是打包一个用于生产环境的构建产物，这样可以去掉开发语句并压缩源代码。
要生成这样的构建产物，请使用 Quasar CLI 和以下命令：
$ quasar build该命令会以 SPA 模式打包项目，构建产物默认输出在 /dist/spa 目录下。
要为生产环境下的构建产物提供服务，需要使用一个 web 服务器，以便通过 http(s):// 协议提供服务。直接在浏览器中打开 index.html 文件是行不通的，因为它使用的是 file:// 协议。
常用的 web 服务器有 nginx、Caddy、Apache、Express 等，但您可以选择任何您想要的 web 服务器。
该 web 服务器不需要特殊设置（除非您在 /quasar.config 文件中配置了使用 “history” 模式的 Vue Router）。主要要求是能够从目录中提供静态文件服务，因此请查阅您所使用的 web 服务器文档，了解如何设置静态文件服务。
一个 nginx 的示例配置如下：
server {
listen 80 http2;
server_name quasar.myapp.com;
root /home/user/quasar.myapp.com/public;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
index index.html;
charset utf-8;
location / {
try_files $uri $uri/ /index.html;
}
location = /robots.txt { access_log off; log_not_found off; }
access_log off;
error_log /var/log/nginx/quasar.myapp.com-error.log error;
location ~ /\.(?!well-known).* {
deny all;
}
}重要的部署配置
有一点很重要：不要允许浏览器缓存 index.html 文件。否则应用的更新可能因为浏览器从缓存中加载 index.html 而被忽略。
所以您必须确保通过部署服务为 index.html 文件添加 "Cache-Control": "no-cache" 响应头。
例如，使用 Google Firebase 部署时，需要在 firebase.json 中添加如下配置：
{
"hosting": {
"headers": [
{
"source": "/**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
}
]
}
}使用 Cloudflare Pages 部署
Cloudflare Pages 提供了一个强大的平台来部署 Quasar SPA，内置了性能、安全和可扩展性相关的功能。下面来配置您的 Quasar 应用以便部署。
首先，安装必要的依赖：
$ yarn add -D @cloudflare/vite-plugin wrangler接下来，修改您的 /quasar.config 文件以引入 Cloudflare Vite 插件：
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig(() => {
return {
build: {
vitePlugins: [cloudflare()],
},
// ... 其他配置
};
});在项目根目录创建 wrangler.jsonc 文件：
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "your-project-name",
"compatibility_date": "2025-04-12",
"pages_build_output_dir": "./dist/spa"
}在 package.json 中添加部署脚本：
"scripts": {
"build": "quasar build",
"deploy": "wrangler pages deploy"
}现在您可以使用以下命令构建和部署应用：
$ yarn build
$ yarn deploy对于已有的 Git 仓库，可以通过将仓库连接到 Cloudflare Pages 来设置持续部署：
$ wrangler pages project create my-quasar-app
$ git remote add cloudflare https://github.com/your-username/your-repo.git
$ git push cloudflare main在 Cloudflare Pages 控制台中配置构建设置：
- 构建命令：
quasar build - 构建输出目录：
dist/spa - 环境变量（如需要）
更多关于 Cloudflare Pages 功能和配置选项的信息，请访问 Cloudflare Pages 文档。
使用 Vercel 部署
部署 Quasar 单页应用到 Vercel 非常简单。只需要安装 vercel-cli 然后登录：
$ vercel login然后继续使用"通用部署"部分中描述的步骤来打包您的 Quasar 应用程序。
打包成功后，进入部署根目录（例如：/dist/spa），然后运行：
# from /dist/spa (or your distDir)
$ vercelVercel CLI 现在应该会显示部署相关的信息，例如 URL。就这样，部署完成了。
Vercel 配置建议
您应该考虑为项目添加一些额外的配置。
重要：Vercel 期望构建产物位于
/public目录，但 Quasar 的构建产物默认位于/dist/spa。因此您需要在 Vercel 项目中覆盖Output Directory设置。通过 Vercel 网页控制台，转到项目 > settings > Build & Development Settings，将其设置为dist/spa。由于 Vercel 期望定义 build 脚本，可以在
package.json中添加以下脚本：
"scripts": {
"build": "quasar build",
"deploy": "vercel"
}- 为了在部署的应用中支持 SPA 路由，请考虑在根文件夹中添加
vercel.json文件：
{
"routes": [{ "handle": "filesystem" }, { "src": "/.*", "dest": "/" }]
}使用 Heroku 部署
不幸的是，Heroku 不支持开箱即用的静态站点。但不用担心，只需要在项目中添加一个 HTTP 服务器，这样 Heroku 就可以为我们的 Quasar 应用提供服务了。
在本例中，我们将使用 Express 创建 Heroku 可以使用的最小服务器。
首先，为项目安装所需的依赖：
$ yarn add express serve-static connect-history-api-fallback安装完成后，就可以添加服务器了。在项目根目录中创建一个名为 server.js 的文件：
import express from "express";
import serveStatic from "serve-static";
import history from "connect-history-api-fallback";
const port = process.env.PORT || 5000;
const app = express();
app.use(history());
app.use(serveStatic(__dirname + "/dist/spa"));
app.listen(port);Heroku 期望有一组 npm 脚本可用，因此需要修改 package.json 并在 script 部分添加以下内容：
"scripts": {
"build": "quasar build",
"start": "node server.js",
"heroku-postbuild": "yarn && yarn build"
}现在可以在 Heroku 上通过以下命令创建应用：
$ heroku create然后部署到 Heroku：
$ git init
$ heroku git:remote -a <heroku app name>
$ git add .
$ git commit -am "make it better"
$ git push heroku master对于已有的 Git 仓库，只需添加 heroku 远程即可：
$ heroku git:remote -a <heroku app name>使用 Surge 部署
Surge 是托管和部署静态站点的流行工具。
如果要使用 Surge 部署应用程序，首先需要安装 Surge CLI 工具：
$ npm install -g surge接下来，使用 Quasar CLI 构建应用程序：
$ quasar build然后通过以下命令使用 Surge 部署应用程序：
$ surge dist/spa现在，您的应用已经通过 Surge 成功部署了。您可以将本指南的方法适配到任何其他静态站点部署工具。
使用 GitHub Pages 部署
要将 Quasar 应用部署到 GitHub Pages，第一步是在 GitHub 上创建一个名为 <username>.github.io 的特殊仓库，并将此仓库克隆到本地。
接下来，按照"通用部署"部分描述的方式打包 Quasar 应用，构建产物将会在 /dist/spa 目录中。将此文件夹的内容复制到克隆的仓库中。
最后一步是在该仓库中提交更改并推送到 GitHub。不久之后，您就可以通过 https://<username>.github.io/ 访问 Quasar 应用了。
给 GitHub Pages 添加自定义域名
有关如何设置自定义域名的详细说明，请参阅 GitHub Pages 指南。
通过 push-dir 自动部署到 GitHub Pages
手动将所有文件复制到 GitHub Pages 仓库可能是一项繁琐的任务。使用 push-dir 包可以自动完成此步骤。
首先，安装该包：
$ yarn add --dev push-dir然后在 package.json 中添加 deploy 脚本：
"scripts": {
"deploy": "push-dir --dir=dist/spa --remote=gh-pages --branch=master"
}添加您的 GitHub Pages 仓库作为名为 gh-pages 的远程仓库：
$ git remote add gh-pages git@github.com:<username>/<username>.github.io.git现在，您可以使用以下命令构建和部署应用：
$ quasar build
$ yarn deploy # 或使用 npm/pnpm/bun 等价命令这会将构建目录的内容推送到 GitHub Pages 仓库的 master 分支。