存在许多服务可以轻松地部署应用程序。要列出所有服务是不可能的，因此我们将重点关注一般的部署过程和一些常见服务的具体情况。
如果您最喜欢的部署工具丢失了，请随时在 GitHub 上创建拉取请求以将其添加到列表中。
一般部署
部署 Quasar SPA 的第一步始终是构建您的文件的生产就绪包，这将消除开发语句并缩小您的源代码。
要生成此类构建，请使用 Quasar CLI 并使用以下命令
$ quasar build此命令将在 SPA 模式下构建您的项目，并将您的生产就绪包输出到新创建的文件夹 /dist/spa 中。
要提供您的生产文件，需要使用 Web 服务器，以便通过 http(s):// 协议提供服务。仅从浏览器中打开 index.html 文件将不起作用，因为这将使用 file:// 协议。
Web 服务器的常见选择是 nginx，Caddy，Apache，Express；但您应该能够使用任何您想要的 Web 服务器。
Web 服务器不需要特殊设置（除非您使用 Vue Router 在 /quasar.config 文件中构建了“history”模式）。主要的要求是能够从目录中提供静态文件，因此请参阅您的 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 网页界面在您项目的设置 > 构建和开发设置中将其设置为dist/spa。由于 Vercel 期望定义构建脚本，您可以在
package.json中添加以下脚本
{
..
"scripts": {
...
"build": "quasar build",
"deploy": "vercel"
}
}- 为了支持部署应用程序中的 SPA 路由，请考虑在您的根文件夹中添加
vercel.json文件
{
"routes": [
{ "handle": "filesystem" },
{ "src": "/.*", "dest": "/index.html" }
]
}使用 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 上部署
要将你的 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然后将一个 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这将把你的构建目录的内容推送到 GitHub Pages 存储库上的 master 分支。