存在许多服务可以轻松地部署应用程序。列出所有这些服务是不可能的，因此我们将重点关注一般的部署过程以及一些常见服务的具体内容。
如果缺少您喜欢的部署工具，请随时在 GitHub 上创建拉取请求将其添加到列表中。
一般部署
部署 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 的浏览器忽略。
这就是为什么您必须始终确保通过您的托管服务将 "Cache-Control": "no-cache" 添加到 index.html 文件的标头。
例如，在 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"
}
]
}
]
}
}使用 Vercel 部署
使用 Vercel 部署您的 Quasar 应用程序非常容易。您只需下载 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 Web UI 在您项目的设置 > 构建和开发设置中将其设置为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 的文件。
const
express = require('express'),
serveStatic = require('serve-static'),
history = require('connect-history-api-fallback'),
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 部分添加以下内容
"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 上部署
要在 GitHub Pages 上部署您的 Quasar 应用程序，第一步是在 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然后将一个 deploy 脚本命令添加到您的 package.json 中
"scripts": {
"deploy": "push-dir --dir=dist/spa --remote=gh-pages --branch=master"
}将您的 GitHub Pages 存储库添加为名为 gh-pages 的远程
$ git remote add gh-pages [email protected]:<username>/<username>.github.io.git现在您可以使用以下命令构建和部署您的应用程序
$ quasar build
$ yarn deploy # or npm/pnpm/bun equivalents这将把您的构建目录的内容推送到 GitHub Pages 存储库上的主分支。