Ubuntu 22.04 Vue.js 開発環境 – npm / Vue CLI / Vite の基本

Ubuntu 22.04 上で Vue.js の開発環境を用意し、npm、Vue CLI、Vite の位置づけを確認する記事です。既存プロジェクトの保守と新規プロジェクトの作成では、選ぶツールが変わります。

この記事では、Ubuntu 22.04 を開発端末または検証端末として使う前提で扱います。本番環境では、開発サーバーをそのまま公開せず、ビルド済み成果物を Web サーバーや配信基盤へ配置する構成を基本にします。

Vue.js 開発環境の位置づけ

前提を確認する

Node.js と npm が使えることを確認します。未導入の場合は npm 記事の手順を先に確認します。

node --version
npm --version
which node
which npm

作業ディレクトリを用意する

開発用の作業ディレクトリを作成します。

mkdir -p ~/work/vue
cd ~/work/vue
pwd

Vue CLI を使う場合

既存プロジェクトや古い手順で Vue CLI が必要な場合の確認例です。グローバルインストールは環境全体に影響するため、用途を明確にします。

npm list -g --depth=0 | grep '@vue/cli' || true
npm install -g @vue/cli
vue --version

Vite を使う場合

新規プロジェクトや軽量な検証では Vite を使う構成が扱いやすい場合があります。

cd ~/work/vue
npm create vite@latest sample-vue -- --template vue
cd sample-vue
npm install

開発サーバーを起動する

ローカル開発用サーバーを起動します。外部からアクセスさせる場合は、接続元とファイアウォールを確認します。

npm run dev -- --host 0.0.0.0

ビルドする

本番配信用の静的ファイルを生成する例です。生成物は通常 dist に出力されます。

npm run build
ls -l dist

Vue CLI と Vite の位置づけ

古い Vue.js の記事では Vue CLI を前提にすることがありますが、現在の Vue 開発では Vite を使う構成が一般的です。この記事では Ubuntu 22.04 上で npm を使い、Vue CLI と Vite の位置づけを確認します。

既存プロジェクトを保守する場合は Vue CLI、新規作成や軽量な検証では Vite、というように分けて考えると判断しやすくなります。

運用上の注意

• Vue CLI は既存手順の再現や古いプロジェクト向けとして扱う
• 新規プロジェクトでは Vite を前提にする方が自然な場合が多い
• グローバル npm パッケージは環境全体に影響するため、開発環境単位で管理する
• 本番環境では、開発サーバーとビルド済み成果物の配信を混同しない
• Node.js と npm のバージョン固定方針をプロジェクトごとに決める

削除する場合

検証用プロジェクトが不要になった場合は、作成した作業ディレクトリを削除します。グローバルに入れた Vue CLI を使わない場合は削除します。

npm uninstall -g @vue/cli
rm -rf ~/work/vue/sample-vue

まとめ

Ubuntu 22.04 で Vue.js 開発環境を使う場合は、まず Node.js と npm の前提を確認します。既存プロジェクトでは Vue CLI、新規作成や軽量な検証では Vite を使うなど、プロジェクトの前提に合わせて選びます。

開発サーバーはローカル開発用です。本番公開では npm run build で生成した成果物を、Apache などの Web サーバーや配信基盤へ配置する構成に分けます。

関連記事

Ubuntu 22.04 npm インストール – Node.js と npm の位置づけを確認する Ubuntu 22.04 KVM virt-install – CLI で仮想マシンを作成する Ubuntu 26.04 PHP CLI の基本設定 – 管理コマンドと拡張モジュールを確認する Ubuntu 26.04 calicoctl の基本設定 – Calico を確認する管理 CLI を配置する Ubuntu 26.04 Helm の基本設定 – Kubernetes アプリケーション配備 CLI を固定バージョンで管理する Ubuntu 26.04 Keycloak CLI の基本設定 – kcadm.sh を使う管理ツールを配置する Ubuntu 22.04 NFS サーバー構築 – NFSv4 と exports の基本 Ubuntu 22.04 Samba 構築 – LDAP 認証と SID の基本