有許多服務可以輕鬆部署應用程式。要列出所有服務是不可能的，因此我們將重點放在一般部署流程以及常見服務的一些細節。
如果您最愛的部署工具沒有列出，請隨時在 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 在專案的設定 > Build & Development Settings 下，將其設定為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 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 目錄。將此資料夾的內容複製到您複製的儲存庫中。
最後一步是在您的儲存庫中新增一個提交並推送到 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 # or npm/pnpm/bun equivalents這會將您的建置目錄內容推送到您 GitHub Pages 儲存庫的 master 分支。