SPA部署

存在许多允许轻松部署应用程序的服务。
列出所有这些将不可能，因此我们将重点介绍一般部署过程和一些常见服务的具体情况。

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

一般部署

部署Quasar SPA的第一步是始终为您的文件构建一个生产版本包，从而摆脱开发声明并压缩源代码。

使用Quasar CLI生成这样的构建, 调用以下命令:

$ quasar build

有关可能的构建选项，请参阅Quasar CLI文档。

此命令将以SPA模式构建您的项目，并将您的生产版本包输出到新创建的文件夹/dist/spa-<theme>（<theme>为您选择构建的主题）。

要为您的生产版本文件提供服务，必须使用Web服务器，以便通过 http:// 协议提供服务。在浏览器中简单打开index.html文件将不起作用，因为它使用 file:// 协议。

Web服务器的常见选择是ngi​​nx，Caddy，Apache，Express，但你应该可以使用任何你想要的web服务器。

Web服务器不需要特殊的设置（除非用Vue Router在“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 = /favicon.ico { access_log off; log_not_found off; }
    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;
    }
}

使用Now部署

使用now部署您的Quasar应用程序非常简单。您只需下载now-cli，然后通过运行以下命令登录：

$ now login

然后继续使用常规部署中描述的步骤构建Quasar应用程序。

构建完成后，将目录切换到您的部署根目录（例如：/dist/spa-mat）

$ now

Now CLI现在应该显示关于您的部署信息，例如URL。 就这样。 你完成了。

使用Heroku进行部署

不幸的是，Heroku不支持开箱即用的静态网站。 但别担心，我们只需要在我们的项目中添加一个HTTP服务器，Heroku就可以为我们的Quasar应用程序提供服务。

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

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

$ npm install 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-<theme>'))
app.listen(port)

确保将<theme>替换为您使用的主题。

Heroku假设一组npm脚本可用，所以我们必须修改package.json并在脚本部分添加以下内容：

"build": "quasar build",
"start": "node server.js",
"heroku-postbuild": "npm install --only=dev --no-shrinkwrap && npm run build"

现在是时候在Heroku上创建一个应用程序了, 通过运行：

$ heroku create

使用Surge进行部署

Surge是托管和部署静态网站的常用工具。

如果您想用Surge部署应用程序，首先需要安装Surge CLI工具：

$ npm install -g surge

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

$ quasar build

现在我们可以调用Surge来部署您的应用程序：

# 确保用您的实际主题替换<theme>
$ surge dist/spa-<theme>

您的应用程序应该使用Surge成功部署。您应该能够将本指南适用于任何其他静态站点部署工具。

在GitHub页面上部署

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

接下来，您需要构建您的Quasar应用程序，如常规部署中所述。这将在dist目录内创建spa-<theme>目录。将此文件夹的内容复制到您的克隆存储库。

最后一步是在存储库中添加一个提交到GitHub的推送。在很短的时间之后，您应该可以通过https://.github.io/访问您的Quasar应用程序。

将自定义域添加到GitHub页面

请参阅GitHub页面指南以获得关于如何设置自定义域的深入说明。

使用push-dir自动部署到GitHub页面

手动将所有文件复制到GitHub Pages存储库可能是一项繁琐的任务。使用push-dir软件包可以自动执行此步骤。

首先，安装软件包：

$ npm install push-dir --save-dev

然后在package.json中添加deploy脚本命令：

// 用您的实际主题（mat, ios）替换<theme>
"scripts": {
  "deploy": "push-dir --dir=dist/spa-<theme> --remote=gh-pages --branch=master"
}

将您的GitHub Pages资源库添加为名为gh-pages的远程文件：

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

现在您可以使用以下方式构建和部署应用程序

$ quasar build
$ npm run deploy

这会将您的构建目录的内容推送到您的Github Pages存储库上的主分支。

IE支持 介绍