npm create vue@latest で作成した Vue アプリは、Vite によって dist/ にビルドされます。1 つの index.html と、すべてのページを描画する JavaScript です。Lobsite はそのフォルダをホストします。npm run build を実行してから npx lobsite を実行すると、HTTPS 対応の *.lobsite.app アドレスでアプリが公開されます。シングルページモードをオンにすると、Vue Router の history モードが機能します。
仕組み
npm run buildでアプリをビルドします。Vite はdist/に書き出します。- プロジェクトで
npx lobsiteを実行します。デプロイされるのはdist/で、Vite がビルドにコピーするpublic/ではありません。最初のデプロイにアカウントは不要で、6 時間有効です。 - Vue Router のためにシングルページモードをオンにします。
lobsite.tomlのspa = true、またはサイト設定の シングルページアプリ です。取得リンクから無料アカウントにサイトを残してください。
Vue Router の history モード
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes,
});
createWebHistory()は/projects/7のようなきれいなアドレスになります。直接開くとサーバーに存在しないファイルを要求しますが、シングルページモードがindex.htmlで応答し、Vue Router が正しいビューを表示します。createWebHashHistory()（/#/projects/7のようなアドレス）は、サーバーが/しか見ないためシングルページモードなしで動作します。共有や検索エンジンにはきれいなアドレスのほうが適しています。- キャッチオールルート（
path: "/:pathMatch(.*)*"）は、アプリ独自の「ページが見つかりません」ビューの置き場所です。シングルページモードでは、不明なページパスはすべてアプリに届くためです。
Nuxt と Vue CLI
- Nuxt は
npx nuxi generateで静的サイトを.output/public/にビルドします。このフォルダは自動で検出されないため、一度npx lobsite .output/publicと指定するとlobsite.tomlに記憶されます。各ページは独立したファイルとして生成されるため、シングルページモードが必要なのは Nuxt が生成しなかったルートのみです。Nuxt のサーバールートとサーバーレンダリングには Node を実行するホストが必要です。 - Vue CLI（
@vue/cli-service）はメンテナンスモードで、新しいプロジェクトは Vite を使います。既存の Vue CLI プロジェクトはdist/にビルドされ、同じ方法でデプロイできます。
lobsite.toml に spa = true を書くか、ダッシュボードのスイッチをオンにするだけです。ディープリンクでアプリが開き、存在しないファイルは引き続き 404 になります。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
アカウントなしのデプロイは 6 時間公開されます。取得リンクから無料で残せます。
Vue ホストの比較
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Vue Router の history モード | spa = true、またはダッシュボードのスイッチ |
_redirects のルール |
vercel.json のリライト |
いいえ: hash モード、またはステータス 404 で配信する 404.html |
| デプロイ後に存在しないスクリプトファイル | 404（明確なエラー） | アプリの index.html |
アプリの index.html |
404 |
| Nuxt のサーバーレンダリング | いいえ | はい | はい | いいえ |
| 最初のデプロイ前のアカウント | 不要: 6 時間公開、その後無料で残せる | 必要 | 必要 | 必要（リポジトリも） |
| バックエンド不要のフォーム | はい（サイトをアカウントに残した後） | はい | いいえ | いいえ |
| カスタムドメイン | はい、無料 | はい | はい | はい |
ブラウザで動く Vue アプリなら、Lobsite はコマンド 1 つで dist/ を公開アドレスに変えられ、history モードも設定 1 つで、デプロイごとにプレビュー URL が付きます。
よくある質問
Vue Router のページを再読み込みすると「Not found」と表示されるのはなぜですか？
history モードのアドレスはアプリの中にしか存在しません。シングルページモードをオン（lobsite.toml の spa = true、またはサイト設定の シングルページアプリ）にすると、これらのパスで index.html が開きます。
Lobsite の Vue アプリは hash モードと history モードのどちらを使うべきですか？
シングルページモードをオンにした history モードです。アドレスがきれいで、検索エンジンは別々のページとして扱います。hash モードは、サーバーの設定を変更できない場合にのみ価値があります。
Nuxt サイトを Lobsite にデプロイできますか？
はい、生成されたサイトなら可能です。npx nuxi generate を実行してから npx lobsite .output/public を実行してください。サーバールートなど、Nuxt のサーバーが必要なページは実行されません。
Vue アプリで「ページが見つかりません」ビューを表示するには？
ルートの最後にキャッチオールルート { path: "/:pathMatch(.*)*", component: NotFound } を追加してください。シングルページモードでは不明なページパスがすべてアプリに届くため、ルーターが表示内容を決定します。