Vueサイト公開

Vueのdistフォルダを
公開する

Vue、Vite、Vue CLI、Nuxtの静的出力をアップロードし、history modeのルート、HTTPS、独自ドメインを確認してから共有できます。

設定手順を見る
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
// Use a deploy-safe asset base
base: './',
build: {
outDir: 'dist'
}
})
Vite / webpack 対応

アップロードするVueのフォルダを確認

Vueの公開トラブルは、出力フォルダ、base設定、ローカルプレビュー不足から起きることが多いです。

Vite + Vue

npm run build
output: dist/

Viteは標準でdistに本番ビルドを出力します。build.outDirやbaseを変更している場合は、実際の出力フォルダと素材URLを確認します。

Vue CLI

npm run build
output: dist/

Vue CLIの静的ビルドも通常はdistです。サブパスで配信する場合はpublicPathが最終URLと合っているか確認します。

Nuxtの静的出力

nuxi generate
output: .output/public または dist/

Nuxtは静的出力にできますが、サーバールートやSSR専用の処理は別の実行環境が必要です。この手順では生成された公開用ファイルをアップロードします。

Vue Routerのhistory modeに必要なこと

きれいなURLをそのまま使う

hash modeはほとんどの静的配信で動きますが、URLに#が残り、共有や計測では扱いにくいことがあります。

history modeでは /about や /dashboard/settings のような自然なパスを使えます。その代わり、実ファイルではないルートでもindex.htmlを返す設定が必要です。

DeployPagesのフォールバック

静的素材に一致しないリクエストではルートのindex.htmlを返し、Vue Routerがブラウザ側で最終的な画面を解決します。

  • ネストしたルートへの直接アクセスがすぐ 404 になりにくい
  • フォールバックレスポンスとしてルートドキュメントを返す
  • Vueがマウント後に現在のURLを読み取り、該当ルートを描画する

Vue 公開前の確認

開発環境で動いていても、アップロード後に壊れる点を先に確認します。

Base設定

Viteではbase、Vue CLIではpublicPathを確認します。値がずれるとCSS、JS、フォント、画像が404になりやすいです。

History fallback

ネストしたルートを直接開いてリロードします。画面が残ればフォールバックが機能しています。

静的出力かどうか

DeployPagesは静的ファイルを配信します。API routes、サーバーミドルウェア、SSR専用処理は別のバックエンドや実行環境が必要です。

ローカルプレビュー

本番ビルドはプレビューサーバーで確認します。file:// でdist/index.htmlを開くと、実際の公開環境と違う問題が出ることがあります。

Vue 公開の手順

01

静的アセットをビルド

Vite、Vue CLI、Nuxtの静的モードで本番ビルドを実行し、ブラウザが直接読めるファイルにします。

02

出力フォルダを見つける

多くのVue / Viteプロジェクトはdistを使います。Nuxtの静的出力は設定により.output/publicまたはdistを公開します。

Nuxtの静的ビルドはプロジェクト設定により.output/publicまたはdistをアップロードします。

03

アップロードしてリンクを確認

出力フォルダ全体をアップロードし、公開後に深いリンク、ルーター遷移、素材パスを確認します。

Vue 公開でよくある問題

Fix 01

ネストしたルートを更新すると 404 になる

Vue Routerがhistory modeを使っていますが、ホストが実ファイルを探しています。SPA fallbackで未知のドキュメントルートをindex.htmlに戻します。

Fix 02

CSS や JS が 404 になる

ViteのbaseまたはVue CLIのpublicPathを確認します。生成された素材を含むdist全体をアップロードしたかも確認します。

Fix 03

hash mode では動くが history mode で壊れる

hash modeは#以降をブラウザだけで扱います。history modeはきれいなURLを使う代わりに、直接アクセス時のフォールバックが必要です。

Fix 04

Nuxt のサーバー機能が動かない

Nuxtの静的出力はファイルとして公開できます。サーバールート、サーバーミドルウェア、SSR専用処理はサーバー実行環境が必要です。

Vue 公開 FAQ

CSS や JS が 404 になる原因は？

ビルド時のbase URLが公開先と違うか、素材フォルダがアップロードされていない可能性があります。Viteではbase、Vue CLIではpublicPathを確認します。

Nuxt も公開できますか？

静的出力なら公開できます。先に静的サイトを生成し、生成された公開用フォルダをアップロードします。NuxtのSSRやserver API routesには別の実行環境が必要です。

hash mode と history mode のどちらを使うべきですか？

きれいなURLが必要で、ホストがindex.html fallbackを扱えるならhistory modeが向いています。hash modeは簡単ですがURLに#が残ります。

Vue のソースプロジェクトをアップロードしてよいですか？

いいえ。本番出力フォルダ、通常はdistをアップロードします。ソースプロジェクトには開発用ファイルや依存関係が含まれます。

Pinia や Vuex の状態はリロード後も残りますか？

自動では残りません。ブラウザのリロードでメモリ上の状態は消えます。必要な状態はlocalStorageなどで永続化します。

以前の公開バージョンに戻せますか？

はい。DeployPages は公開履歴を保持し、必要に応じて以前の静的ビルドへ戻せます。