部署 SPA

有许多服务可以轻松部署应用程序。将其全部列出是不可能的，因此我们将专注于一般部署过程和一些普通服务的细节。

如果缺少您最喜欢的部署工具，请在 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.js 中配置了使用 “history” 模式的 Vue 路由）。主要要求是能够从一个目录中提供静态文件，因此请查阅 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"
          }
        ]
      }
    ]
  }
}

使用 Vercel 部署

部署 Quasar 单页应用到 Vercel 非常简单。只需要安装 vercel-cli 然后登陆：

$ vercel login

然后继续使用通用部署部分中描述的步骤来打包您的 Quasar 应用程序。

打包成功后，进入部署根目录中（例如：/dist/spa），然后运行：

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

Vercel CLI 现在应该显示相关部署的信息，如 URL。就这样，已经成功了。

Vercel 配置

在部署时给项目添加一些配置。

• 重要：Vercel 希望构建产物位于 /public 目录，但是 Quasar 的构建产物默认位于 /dist/spa。所以您可以在您的 Vercel 项目中将 Output Directory 设置为 dist/spa，访问 Vercel 的网页控制台，转到您的项目 > settings > Build & Development Settings。

• 由于 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 可以使用的最小服务器

首先，为项目安装所需的依赖项：project:

$ 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 页面指南。

通过 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

它将把构建目录的内容推送到 GitHub Pages 仓库的主分支。