有许多服务可以轻松部署应用。列出所有这些是不可能的，因此我们将重点介绍常规部署流程和一些常见服务的具体细节。

¥There exist many services that allow deploying applications with ease. To list all of them would not be possible so we will focus on the general deployment process and some specifics for common services.

如果你最喜欢的部署工具缺失，请随时在 GitHub 上创建拉取请求将其添加到列表中。

¥If your favorite deployment tool is missing feel free to create a pull request on GitHub to add it to the list.

通用部署(General deployment)

¥General deployment

部署 Quasar SPA 的第一步始终是构建一个可用于生产环境的文件包，这将删除开发语句并压缩源代码。

¥The first step in deploying your Quasar SPA is always to build a production-ready bundle of your files, which gets rid of development statements and minifies your source.

要生成此类构建，请使用 Quasar CLI 和以下命令：

¥To produce such a build use Quasar CLI with the following command:

$ quasar build

此命令将以 SPA 模式构建你的项目，并将可用于生产的软件包输出到新创建的文件夹 /dist/spa。

¥This command will build your project in SPA mode and output your production ready bundle to a newly created folder /dist/spa.

To serve your production files it is required to use a web server, so to serve over http(s):// protocol.Simply opening the index.html file from within your browser will not work, since this uses the file:// protocol instead.

Web 服务器的常见选择是 nginx、Caddy、Apache、Express；但你应该能够使用任何你想要的 Web 服务器。

¥Common choices for web servers are nginx, Caddy, Apache, Express; but you should be able to use whatever web server you want.

Web 服务器无需特殊设置（除非你在 /quasar.config 文件中使用 “history” 模式的 Vue Router 构建）。主要要求是能够从目录提供静态文件，因此请参阅 Web 服务器的文档，了解如何设置静态文件服务。

¥The web server requires no special setup (unless you built with Vue Router in “history” mode in the /quasar.config file). The main requirement is to be able to serve static files from a directory, so consult the documentation of your web server on how to set up static file serving.

nginx 的示例配置可能如下所示：

¥An example config for nginx may look like this:

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;
    }
}

重要托管配置(Important Hosting Configuration)

¥Important Hosting Configuration

请务必不要允许浏览器缓存 index.html 文件。否则，对于从缓存加载 index.html 的浏览器来说，对此文件或你的应用的更新可能会被忽略。

¥It’s important that you do not allow browsers to cache the index.html file. Because otherwise updates to this file or to your app might slip through the cracks for browsers that load the index.html from cache.

这就是为什么你必须始终确保通过托管服务将 "Cache-Control": "no-cache" 添加到 index.html 文件的标头中。

¥This is why you must always make sure to add "Cache-Control": "no-cache" to the headers of the index.html file via your hosting service.

以 Google Firebase 为例，你需要将以下内容添加到 firebase.json 配置中：

¥As an example how this is done for Google Firebase, you would add the following to the firebase.json configuration:

{
  "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 部署(Deploying with Cloudflare Pages)

¥Deploying with Cloudflare Pages

Cloudflare Pages 提供了一个强大的平台，用于部署具有内置性能、安全性和可扩展性的 Quasar SPA。让我们设置你的 Quasar 应用以进行部署。

¥Cloudflare Pages offers a powerful platform for deploying Quasar SPAs with built-in performance, security, and scalability features. Let’s set up your Quasar application for deployment.

首先，安装所需的依赖：

¥First, install the required dependencies:

$ yarn add -D @cloudflare/vite-plugin wrangler

接下来，修改你的 /quasar.config 文件以包含 Cloudflare Vite 插件：

¥Next, modify your /quasar.config file to include the Cloudflare Vite plugin:

import { cloudflare } from "@cloudflare/vite-plugin"

export default defineConfig(() => {
  return {
    build: {
      vitePlugins: [
        cloudflare()
      ]
    }
    // ... rest of your config
  }
})

在项目根目录中创建一个 wrangler.jsonc 文件：

¥Create a wrangler.jsonc file in your project root:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "your-project-name",
  "compatibility_date": "2025-04-12",
  "pages_build_output_dir": "./dist/spa"
}

将部署脚本添加到你的 package.json 中：

¥Add the deploy script to your package.json:

"scripts": {
  "build": "quasar build",
  "deploy": "wrangler pages deploy"
}

现在你可以使用以下方式构建和部署你的应用：

¥Now you can build and deploy your application using:

$ yarn build
$ yarn deploy

对于现有的 Git 存储库，你可以通过将存储库连接到 Cloudflare Pages 来设置持续部署：

¥For existing Git repositories, you can set up continuous deployment by connecting your repository to 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 仪表板中配置你的构建设置：

¥Configure your build settings in the Cloudflare Pages dashboard:

• 构建命令：quasar build

  ¥Build command: quasar build

• 构建输出目录：dist/spa

  ¥Build output directory: dist/spa

• 环境变量（如果需要）

  ¥Environment variables (if needed)

有关 Cloudflare Pages 功能和配置选项的更多信息，请访问 Cloudflare Pages 文档。

¥For more information about Cloudflare Pages features and configuration options, visit the Cloudflare Pages documentation.

使用 Vercel 部署(Deploying with Vercel)

¥Deploying with Vercel

使用 Vercel 部署 Quasar 应用非常简单。你只需下载 vercel-cli 并运行以下命令登录：

¥Deploying your Quasar application with Vercel is really easy. All you have to do is to download the vercel-cli and log in by running:

$ vercel login

然后按照 “通用部署” 部分中描述的步骤构建你的 Quasar 应用。

¥Then proceed to build your Quasar application using the steps described in “General deployment” section.

构建完成后，将目录更改为你的部署根目录（例如：/dist/spa）并运行：

¥After the build is finished, change directory into your deploy root (example: /dist/spa) and run:

# from /dist/spa (or your distDir)
$ vercel

Vercel CLI 现在应该会显示有关你的部署的信息，例如 URL。就是这样。你完成。

¥The Vercel CLI should now display information regarding your deployment, like the URL. That’s it. You’re done.

Vercel 配置提示(Vercel configuration tips)

¥Vercel configuration tips

你应该考虑在项目中添加一些额外的配置。

¥You should consider adding some additional configurations to your project.

• 重要提示：Vercel 期望构建结果位于 /public 目录中，而 Quasar 默认位于 /dist/spa 目录中，因此你需要在 Vercel 项目中覆盖 Output Directory 目录。通过 Vercel 网页界面，在项目设置 > 构建和开发设置下，将其设置为 dist/spa。

  ¥Important: Vercel expects the build results to be in /public directory, and Quasar has it in /dist/spa by default, so you will need to override the Output Directory in your Vercel project. Set it to dist/spa through the Vercel web ui under your project’s settings > Build & Development Settings.

• 由于 Vercel 要求定义构建脚本，你可以在 package.json 中添加以下脚本：

  ¥Since Vercel expects the build script to be defined, you may add in package.json the following scripts:

"scripts": {
  "build": "quasar build",
  "deploy": "vercel"
}

• 为了在部署的应用中支持 SPA 路由，请考虑在根文件夹中添加 vercel.json 文件：

  ¥In order to support SPA routing in the deployed app, consider adding vercel.json file in your root folder:

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/" }
  ]
}

使用 Heroku 部署(Deploying with Heroku)

¥Deploying with Heroku

遗憾的是，Heroku 不支持开箱即用的静态网站。不过不用担心，我们只需要在项目中添加一个 HTTP 服务器，这样 Heroku 就可以为我们的 Quasar 应用提供服务了。

¥Unfortunately, Heroku does not support static sites out of the box. But don’t worry, we just need to add an HTTP server to our project so Heroku can serve our Quasar application.

在本例中，我们将使用 Express 创建一个 Heroku 可以使用的最小服务器。

¥In this example, we will use Express to create a minimal server which Heroku can use.

首先，我们需要安装项目所需的依赖：

¥First, we need to install the required dependencies to our project:

$ yarn add express serve-static connect-history-api-fallback

现在我们已经安装了所需的依赖，可以添加服务器了。在项目根目录中创建一个名为 server.js 的文件。

¥Now that we have installed the required dependencies, we can add our server. Create a file called server.js in the root directory of your project.

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 部分添加以下内容：

¥Heroku assumes a set of npm scripts to be available, so we have to alter our package.json and add the following under the script section:

"scripts": {
  "build": "quasar build",
  "start": "node server.js",
  "heroku-postbuild": "yarn && yarn build"
}

现在是时候在 Heroku 上创建一个应用了，运行以下命令：

¥Now it is time to create an app on Heroku by running:

$ heroku create

并使用以下方式部署到 Heroku：

¥and deploy to Heroku using:

$ git init
$ heroku git:remote -a <heroku app name>

$ git add .
$ git commit -am "make it better"
$ git push heroku master

对于现有的 Git 存储库，只需添加 heroku 远程：

¥For existing Git repositories, simply add the heroku remote:

$ heroku git:remote -a <heroku app name>

使用 Surge 部署(Deploying with Surge)

¥Deploying with Surge

Surge 是一个流行的静态网站托管和部署工​​具。

¥Surge is a popular tool to host and deploy static sites.

如果你想使用 Surge 部署你的应用，则首先需要安装 Surge CLI 工具：

¥If you want to deploy your application with Surge you first need to install the Surge CLI tool:

$ npm install -g surge

接下来，我们将使用 Quasar CLI 构建我们的应用：

¥Next, we will use Quasar CLI to build our app:

$ quasar build

现在我们可以通过调用以下命令使用 Surge 部署我们的应用：

¥Now we can deploy our application using Surge by calling:

$ surge dist/spa

现在你的应用应该已使用 Surge 成功部署。你应该能够将本指南应用于任何其他静态站点部署工具。

¥Now your application should be successfully deployed using Surge. You should be able to adapt this guide to any other static site deployment tool.

在 GitHub Pages 上部署(Deploying on GitHub Pages)

¥Deploying on GitHub Pages

要将你的 Quasar 应用部署到 GitHub 页面，第一步是在 GitHub 上创建一个名为 <username>.github.io 的特殊仓库。将此存储库克隆到本地计算机。

¥To deploy your Quasar application to GitHub pages the first step is to create a special repository on GitHub which is named <username>.github.io. Clone this repository to your local machine.

接下来，你需要按照 “通用部署部分” 中的说明构建你的 Quasar 应用。这将创建一个 /dist/spa 目录。将此文件夹的内容复制到你克隆的存储库。

¥Next, you need to build your Quasar application like it is described in the “General deployment section”. This will result in a /dist/spa directory. Copy the content of this folder to your cloned repository.

最后一步是在你的代码库中添加提交并推送到 GitHub。片刻之后，你应该能够在 https://<username>.github.io/ 访问你的 Quasar 应用。

¥The last step is to add a commit in your repository and push to GitHub. After a short time, you should be able to visit your Quasar application at https://<username>.github.io/.

向 GitHub 页面添加自定义域名(Adding a custom domain to GitHub pages)

¥Adding a custom domain to GitHub pages

请参阅 GitHub 页面指南 以获取有关如何设置自定义域的详细说明。

¥Please see the GitHub pages guides for an in-depth explanation on how to set up a custom domain.

使用 push-dir 自动部署到 GitHub 页面(Automated deployment to GitHub pages with push-dir)

¥Automated deployment to GitHub pages with push-dir

手动将所有文件复制到 GitHub Pages 仓库可能非常繁琐。此步骤可以通过使用 push-dir 包自动执行。

¥Manual copying all your files to your GitHub Pages repository can be a cumbersome task to do. This step can be automated by using the push-dir package.

首先，使用以下命令安装包：

¥First, install the package with:

$ yarn add --dev push-dir

然后，在你的 package.json 文件中添加一个 deploy 脚本命令：

¥Then add a deploy script command to your package.json:

"scripts": {
  "deploy": "push-dir --dir=dist/spa --remote=gh-pages --branch=master"
}

将你的 GitHub Pages 仓库添加为名为 gh-pages 的远程仓库：

¥Add your GitHub Pages repository as a remote named gh-pages:

$ git remote add gh-pages git@github.com:<username>/<username>.github.io.git

现在你可以使用以下方式构建和部署你的应用：

¥Now you can build and deploy your application using:

$ quasar build
$ yarn deploy # or npm/pnpm/bun equivalents

这会将构建目录的内容推送到 GitHub Pages 仓库的 master 分支。

¥which will push the content of your build directory to your master branch on your GitHub Pages repository.