有許多服務可以輕鬆部署應用程式。列出所有服務是不可能的，因此我們將重點放在一般部署流程以及一些常見服務的具體細節。
如果您找不到您喜歡的部署工具，請隨時在 GitHub 上建立 pull request 將其新增到列表中。
一般部署
部署 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": "/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 remote
$ 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 目錄。將此資料夾的內容複製到您複製的儲存庫。
最後一步是在您的儲存庫中新增 commit 並推送到 GitHub。稍待片刻後，您應該可以透過 https://<username>.github.io/ 存取您的 Quasar 應用程式。
為 GitHub Pages 新增自訂網域
請參閱 GitHub Pages 指南，以深入了解如何設定自訂網域。
使用 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 的 remote
$ git remote add gh-pages git@github.com:<username>/<username>.github.io.git現在您可以使用以下指令建置和部署您的應用程式
$ quasar build
$ yarn deploy這會將您的建置目錄內容推送到您的 GitHub Pages 儲存庫的 master 分支。