L17 build-tools-vite-vuecli — Vue CLI と Vite の違い

L17 build-tools-vite-vuecli — Vue CLI と Vite の違い

同じ Vue アプリを動かすビルドツール 2 系統 — Vue CLI (webpack ベース) と Vite (esbuild/Rollup ベース) —

の違いを理解する。 起動コマンド・設定ファイル・依存解決の挙動がどう違うか、 そして

今どきの新規プロジェクトでなぜ Vite が標準なのか を腹落ちさせるトピック。

このトピックで扱うこと

• 起動コマンドの違い (vue-cli-service serve ↔ vite)
• 設定ファイルの違い (vue.config.js ↔ vite.config.ts)
• 開発サーバーの仕組み (webpack の全バンドル ↔ Vite の native ESM + 必要分だけ変換)
• 依存解決の違い = import の default/named 解決でハマる所
• なぜ 2026 時点の新規は npm create vite が標準で、 Vue CLI は保守モードなのか

扱わないこと

• webpack / Rollup の設定詳細 (= 各ツールの公式ドキュメント)
• TS 版と JS 版の違い (= project-scaffold-ts-js/ で扱う)
• Vite のプラグイン自作 (= 応用)

前提

• first-step/ — Vite プロジェクトの起動
• project-scaffold-ts-js/ — プロジェクト構成の基礎

対比表

観点	Vue CLI (webpack)	Vite
作成コマンド	vue create my-app	npm create vite@latest
起動	vue-cli-service serve	vite (or vite dev)
ビルド	vue-cli-service build	vite build
設定ファイル	vue.config.js	vite.config.{js,ts}
開発サーバ	起動時に 全体をバンドル (大規模で遅い)	native ESM、 変更分だけ変換 (即起動)
本番ビルド	webpack	Rollup
状況 (2026)	保守モード (新規非推奨)	新規の事実上の標準

import の default/named でハマる罠

ビルドツールが違っても、 ES Modules の import 規則 (default ↔ named) は同じ。

「Vue CLI なら波括弧が要る / Vite なら要らない」 という違いは 存在しない。 波括弧の有無を決めるのは

ビルドツールではなく、 ライブラリ (とそのバージョン) の export 形態。

// 波括弧の有無は webpack でも Vite でも同じ。 決めるのはライブラリの export 形態:
import Foo from 'some-lib'      // ライブラリが default export なら波括弧なし
import { Foo } from 'some-lib'  // ライブラリが named export なら波括弧あり

• import の波括弧は ライブラリの export 形態 で決まる。 **ビルドツールでは変わらないが、 ライブラリの

バージョンでは変わりうる** (= メジャーアップグレードで export 形態が変わるライブラリがある)。

• 実例: @vuepic/vue-datepicker は v11 まで default export → v12 で named export に変更。

同じ Vite 上でも、 v11 は import VueDatePicker from …、 v12+ は import { VueDatePicker } from … が正しい。

(詳細は datepicker/ トピック)

• 「環境を変えたら波括弧で動いた/動かなくなった」 と感じたら、 まず パッケージのバージョン差 を疑う。

ビルドツール差ではなく、 上げた版で export 形態が変わった可能性が高い。

• 確認は node -e "import('pkg').then(m => console.log(Object.keys(m)))" で namespace を見るのが確実。

['default'] なら波括弧なし、 ['Foo', …] なら波括弧あり。

> このトピックの裏テーマ: 「環境 (ビルドツール) のせいだ」 と思い込む前に、 何が本当に違うのかを 1 つずつ実機で確かめる。

> ビルドツール差・言語差・バージョン差 を切り分ける癖をつける。 今回の波括弧問題の真因も、 ツールではなく

> ライブラリの v11→v12 の破壊的変更だった。

サンプル

Vite 側は実物 (../project-scaffold-ts-js/sample-code/ を流用)。

Vue CLI 側は設定ファイルの対比のみ (vue-config-example/) — webpack 環境は重く陳腐化が速いため、

本トピックでは構築せず対比表で理解する。

学習時間

内訳	時間
読解 + 対比表	30 分
演習 (Vite プロジェクト起動 + namespace 確認)	20 分

採点

namespace から正しい import 文を導く判定ロジック (drill/01-import-resolver) を採点する。

cd frontend/vue
pnpm test topics/build-tools-vite-vuecli

cd ../project-scaffold-ts-js/sample-code/完成品-ts
bun install
# vue が default/named どちらを export しているか namespace を見る
node --input-type=module -e "import('vue').then(m => console.log(Object.keys(m).slice(0,10)))"